body {
  background-color: var(--background);
}

header .content .link {
  color: black !important;
}

#blog {
  padding-top: 8rem;

  & .heading {
    display: grid;
    gap: 6rem;
    margin-bottom: 8rem;    

    & .title {
      font-family: 'Gloock', sans-serif;
      font-size: 6rem;
      align-items: center;
      gap: 1rem;
      display: flex;
      margin: 0;

      @media (max-width: 1024px) {
        &.title {
          font-size: 2.7rem;
        }
      }
    }
  }

  & .post-type {
    margin-bottom: 4rem;

    & .post-type__empty {
      font-size: 1.25rem;
      font-weight: 500;
      color: black;
      text-align: center;
      padding-block: 2rem;
    }

    &.highlight .post-type__list {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      height: 750px;
      gap: .5rem;

      & .post-type__item__content {
        display: none !important;
      }

      & :nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;

        & .post-type__item {
          padding-bottom: 0;
          border: none;
          box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.33);

          & img {
            height: 100%;
          }
        }
      }

      & .post-type__item {
        padding-bottom: 0;
        border: none;
        box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.33);

        & img {
          height: 100%;
        }
      }
    }

    & .post-type__title {
      font-weight: 500;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;

      &:before {
        content: "";
        width: 4rem;
        height: 1px;
        background-color: black;
        display: inline-block;
      }
    }

    & .post-type__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;

      & .post-type__item {
        background-color: white;
        border: 1px solid black;
        color: black;
        text-decoration: none;
        padding-bottom: 1rem;

        & img {
          width: 100%;
          height: 450px;
          object-fit: cover;
        }

        & .post-type__item__content {
          padding: 1rem;
          display: grid;
          gap: 1rem;

          & .post-type__item__type {
            font-size: .75rem;
            font-weight: 400;
            display: flex;

            span {
              border: 1px solid black;
              align-items: center;
              font-size: .75rem;
              padding: .25rem 2.5rem;
              font-weight: 400;
              border-radius: .125rem;
              color: black;
            }
          }

          .post-type__item__title {
            font-size: 1rem;
            font-weight: 500;
          }
        }
      }
    }
  }

  .back_to_top {
    display: flex;
    justify-content: center;

    a {
      padding: 1rem 1.5rem;
      background-color: transparent;
      border: 1px solid black;
      text-decoration: none;
      color: black;
      border-radius: .25rem;
      font-size: 1.25rem;
    }
  }
}