main.with-meta {
  max-width: $width-wide;
  margin: 0 auto;
  padding: 2rem;

  > .content {
    padding: 0;
  }

  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
  display: grid;
  grid-template-columns: $width-sidebar $width-content $width-sidebar;
  column-gap: 2rem;

  h1 {
    font-size: 1.75rem;
  }

  .length {
    color: color-mix(in srgb, var(--text) 50%, var(--background));
    margin: 0.25rem 0;
    font-size: 0.8rem;
  }
}

@media (max-width: $width-wide) {
  main.with-meta {
    display: block;
    padding: 0;

    > .meta {
      max-width: $width-content;
      margin: 0 auto;
      padding: 2rem;
    }

    > .content {
      padding: 2rem;
    }
  }
}

@media (max-width: $width-mobile) {
  main.with-meta {
    > .meta {
      padding: 1rem;
    }

    > .content {
      padding: 0 1rem 1rem 1rem;
    }
  }
}

.list {
  .post {
    display: block;
    color: inherit;

    &:not(:first-child) {
      margin-top: 4rem;
    }

    .title {
      font-size: 2.25rem;
    }

    .meta {
      font-size: 0.8rem;

      .date {
        color: var(--text-600);
      }

      .duration {
        color: color-mix(in srgb, var(--text) 50%, var(--background));
      }
    }
  }

  .post:hover .title,
  .post:hover .summary {
    color: var(--text-800);
  }
}

@media (max-width: $width-mobile) {
  .list {
    .post {
      &:not(:first-child) {
        margin-top: 2rem;
      }
    }
  }
}