.logo{
    display: block;
  }

  .featured{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      grid-column-gap: 1.6rem;
      grid-row-gap: 3.2rem;
      margin-bottom: 12.8rem;
  }

  .featured a{
      display: block;
  }

  .featured a h2{
      text-transform: uppercase;
  }

  .featured a *{
      font-size: var(--body);
  }

  .featured a:first-of-type{
      grid-column-end:span 2;
  }

  .featured a:hover{
      border-width: 0.3em;
  }

  .featured a:hover *{
      text-decoration: underline;
  }

  .featured .post-wrapper {
    display: block;
    display: grid;
    grid-template-columns: 1fr;
  }
  .featured  a .image-border{
    border: 1.6rem solid transparent;
    padding-bottom: calc(60% - 3.2rem);
    width:100%;
    grid-row: 1;
    grid-column: 1;
    z-index:2;
  }

  .featured  a .image-holder{
    /* border: 1.6rem solid transparent; */
    position: relative;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    display: block;
    padding-bottom: 60%;
    top: 0;
    height: 1px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-blend-mode: multiply;
    filter: greyscale(1);
    transition: opacity 1s, filter .5s;
}

  .featured a:hover .image-border{
      border-color: var(--border-color);
  }

  .featured a:hover .image-holder{
      border-color: inherit;
  }

  .archive{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 1.6rem;
    grid-row-gap: 3.2rem;
    margin-bottom: 12.8rem;
  }


  .archive a h2{
    text-transform: uppercase;
}
  .archive a *{
    font-size: var(--body);
}

.archive a:hover *{
    text-decoration: underline;
}

.archive .block{
  width: 100%;
  height:1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60%;
  overflow:hidden;
  position: relative;
  z-index: 1;
}

.block-image img{
    position: absolute;
    z-index: 2;
  opacity: 0;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale();
  mix-blend-mode: multiply;
  top: 50%;
  transform: translateY(-50%);
}

.archive a:hover .block-image img {
  opacity: 1;
}

  .archive a:nth-of-type(3n + 0){
      grid-column: 2;
  }

  .archive a:nth-of-type(3n + 1){
      grid-column: 1;
  }

  .archive a:nth-of-type(3n + 2){
      grid-column: 3;
  }