@layer section {
  :root {
      --body-item-spacing: 1rem;
  }

  .blog.list {
    gap: 8rem 0;
  }

  .blog.list > h1.date {
    grid-column: content-start / content-end;
  }

  .blog.list > ul,
  .blog.list > ul > li {
    grid-column: wide-content-start / wide-content-end;
  }

  @supports (grid-template-columns: subgrid) {
    .blog.list > ul,
    .blog.list > ul > li,
    .blog.list > ul > li > article {
      display: grid;
      grid-template-columns: subgrid;
      gap: var(--body-item-spacing) 0;
    }
  }

  /*
  @media (max-width: 415px) {
    .blog.list > ul,
    .blog.list > ul > li {
      display: block;
    }
  }
  */

  .blog.list > ul {
    gap: 8rem 0;
  }

  .blog.list > ul > li {
    gap: 1rem 0;
    margin: 0;
  }

  li > time {
    font-variant-numeric: tabular-nums;
    grid-column: wide-content-start;
    justify-self: end;
  }

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

  li > .title {
    grid-column: content-start / content-end;
  }

  li > article {
    grid-column: gutter-start / gutter-end;
  }

  li > p,
  li > .tags {
    grid-column: content-start / content-end;
  }

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

  @media (max-width: 414px) {
    li > article > figure,
    li > article > figure img {
        border-radius: 0;
    }
  }

  .blog.list > ul,
  .blog.list > ul > li {
    margin-inline-start: 0;
  }

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

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