.posts {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-template-rows: auto;
  padding-block: var(--space-3xl);
}

article {
  display: grid;
  gap: 1rem;
  grid-row: span 4;
  grid-template-areas:
    "img"
    "title"
    "preview"
    "nav";
  grid-template-rows: subgrid;
  padding-top: 0;

  header {
    font-weight: var(--font-weight-semibold);
    grid-area: title;
    padding-block: 0;
  }

  img {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    grid-area: img;
    margin-inline: calc(-1 * var(--space-lg));
    max-width: calc(100% + var(--space-2xl));
    width: calc(100% + var(--space-2xl));
    z-index: -1;
  }

  nav {
    grid-area: nav;
    text-align: center;
  }

  .preview {
    display: -webkit-box;
    grid-area: preview;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .topic {
    grid-area: topic;
  }
}