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

  > .content {
    width: 100%;
    padding: 0;
  }

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

  .title {
    font-size: 1.75rem;
    margin: 0;
  }

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

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

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

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

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

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