:root {
    --list-item-block-gap: var(--body-item-spacing);
}

@layer section {
  .list {
    gap: var(--list-item-block-gap) 0;
  }

  .list > h1,
  .list > header {
    grid-column: content-start / content-end;
  }

  .list > .post {
    grid-column: wide-content-start / wide-content-end;
  }

  @supports (grid-template-columns: subgrid) {
    .list > .post {
      --body-item-spacing: 2rem;

      display: grid;
      grid-template-columns: subgrid;
      gap: var(--body-item-spacing) 0;
    }
  }

  .list .post header {
    grid-column: wide-content-start / content-end;
  }

  @supports (grid-template-columns: subgrid) {
    .list .post header {
      display: grid;
      grid-template-columns: subgrid;
    }
  }

  .list .post time {
    font-variant-numeric: tabular-nums;
    grid-column: wide-content-start;
    justify-self: end;
  }

  @media (max-width: 960px) {
    .list .post time {
      grid-column: content-start / content-end;
      justify-self: start;
      line-height: var(--line-height);
    }
  }

  .post {
    grid-column: gutter-start / gutter-end;
  }

  .post p,
  .post .tags,
  .post .title {
    grid-column: content-start / content-end;
  }

  li > article > p:last-child {
    margin-block-end: 0;
  }

  .title {
    font-size: var(--h5-size);
  }

  .title, .title a {
    color: var(--color);
  }
}