.posts {
  --grid-gap: var(--space-scale-m);

  & [role="listitem"]:nth-child(n + 2) {
    position: relative;
  }

  & [role="listitem"]:first-child {
    min-height: 20rem;

    max-inline-size: 100%;
    & * {
      max-inline-size: 100%;
    }

    & h2 {
      font-size: var(--type-scale-5);
      line-height: var(--line-height-5);
    }
  }

  & [role="listitem"]:nth-child(2) {
    & h2 {
      font-size: var(--type-scale-3);
    }
  }

  & .excerpt {
    display: none;
  }

  & [role="listitem"]:nth-child(-n + 2) {
    & .excerpt {
      display: block;
    }
  }
}

/* Small screens (default) */
@media (max-width: 700px) {
  .posts {
    grid-template-columns: 1fr;
  }
}

/* Medium screens (600px and above) */
@media (min-width: 701px) and (max-width: 1000px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }

  .posts > :first-child {
    grid-column: span 2;
  }

  .posts [role="listitem"]:nth-child(-n + 2) {
    & .excerpt {
      display: block;
    }
  }
}

/* Large screens (1001px and above) */
@media (min-width: 1001px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }

  .posts > :first-child {
    grid-column: span 2;
  }

  .posts > :nth-child(2) {
    &::after {
      display: none;
    }
  }

  .posts [role="listitem"]:nth-child(-n + 5) {
    & .excerpt {
      display: block;
    }
  }

  .posts > :nth-child(2) {
    grid-column: span 1;
  }
}