@charset "UTF-8";
/*--------------------------------------------
POST
---------------------------------------------*/
#postSns{
  border-block : solid 1px #2f2e2e33;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  a , button{
    width: auto;
    aspect-ratio: 1;
    display: grid;
    place-items:center;
  }
  img{
    height : calc( 19 * var(--remBase ) );
  }
  @media screen and ( width <= 768px ){
    margin-top : calc( 80 * var(--remBase ) );
    a , button{
      height : calc( 36 * var(--remBase ) );
    }
  }
  @media print,screen and ( width > 768px ){
    margin-top : calc( 100 * var(--remBase ) );
    a , button{
      height : calc( 39 * var(--remBase ) );
    }
  }
}
#copyUrl {
  anchor-name: --copy-url-anchor;
}
#copied {
  position-anchor: --copy-url-anchor;
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  border: none;
  white-space: nowrap;
  overflow: visible;
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
  @media screen and ( width <= 768px ){
    margin-bottom: calc( 8 * var(--remBase) );
    padding: calc( 6 * var(--remBase) ) calc( 12 * var(--remBase) );
    border-radius: calc( 4 * var(--remBase) );
    font-size: calc( 12 * var(--remBase) );
    &:after{
      border-width: calc( 6 * var(--remBase) ) calc( 6 * var(--remBase) ) 0 calc( 6 * var(--remBase) );
    }
  }
  @media print,screen and ( width > 768px ){
    margin-bottom: calc( 8 * var(--remBase) );
    padding: calc( 6 * var(--remBase) ) calc( 12 * var(--remBase) );
    border-radius: calc( 4 * var(--remBase) );
    font-size: calc( 12 * var(--remBase) );
    &:after{
      border-width: calc( 6 * var(--remBase) ) calc( 6 * var(--remBase) ) 0 calc( 6 * var(--remBase) );
    }
  }
}
#latestPosts{
  header{
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: auto auto;
    h2{
      font-size : calc( 18 * var(--remBase ) );;
      line-height : 1.5;
      font-weight: 400;
    }
    a{
      font-size : calc( 14 * var(--remBase ) );;
      line-height : 1.5;
      display: block;
    }
  }
  .splide__track{
    margin-top : calc( 20 * var(--remBase ) );
  }
  .splide__slide a{
    display: block;
    padding-bottom : calc( 24 * var(--remBase ) );
    height: 100%;
  }
  picture{
    width: 100%;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  h3{
    font-weight: 400;
    padding-inline : calc( 24 * 100% / 248 );
    margin-top : calc( 24 * var(--remBase ) );
    font-size : calc( 18 * var(--remBase ) );;
    line-height : 1.5;
  }
  @media screen and ( width <= 768px ){
    margin-top : calc( 62 * var(--remBase ) );
    picture{
      height : calc( 140 * var(--remBase ) );
    }
    h3{
      padding-inline : calc( 24 * 100% / 248 );
    }
    .splide__pagination{
      padding-block : calc( 18 * var(--remBase ) );
      display: grid;
      grid-auto-flow: column;
      justify-content: center;
      align-items: center;
      column-gap : calc( 6 * var(--viewportBase ) );
      button{
        aspect-ratio: 1;
        border-radius: 50%;
        height : calc( 6 * var(--remBase ) );
        width: auto;
        &:not(.is-active){
          background-color: color-mix( in srgb , #2f2e2e 20% , transparent );
        }
        &.is-active{
          background-color: #009df0;
        }
      }
    }
  }
  @media print,screen and ( width > 768px ){
    margin-top : calc( 30 * var(--remBase ) );
    .splide__list{
      display: grid;
      grid-template-columns: repeat( 3 , calc( 312 * var(--contentBase) ) );
      justify-content: space-between;
    }
    .splide__slide a{
      outline : solid 1px #ccc;
      outline-offset : -1px;
    }
    picture{
      height : calc( 172 * var(--remBase ) );
    }
    h3{
      padding-inline : calc( 24 * 100% / 312 );
    }
  }
}
@media ( hover : hover ){
  #latestPosts header a:hover{
    color:#009df0;
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #latestPosts header a{
    transition: color var(--transitionBase);
  }
}