@layer component {
  .detail-list {
    color: var(--color-text-tertiary);
    background-color: var(--color-background-accent);
    padding-block-start: clamp(2.25rem, 4vw, 3rem);
    padding-block-end: var(--layout-component-block-space);
  }

  .detail-list__description {
    font: var(--font-body-l-semibold);
    margin-block-start: 0.75rem;
  }

  .detail-list__items {
    padding-inline-start: 0;
    margin-block: 2rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media screen and (min-width: 48rem) {
    .detail-list__description {
      font: var(--font-head-xs-semibold);
      letter-spacing: var(--letter-spacing-heading-semibold);
    }

    .detail-list__items {
      margin-block-start: 2.5rem;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.25rem 8.5rem;

      & > * {
        grid-column: 1 / 2;
      }

      & > .col-second {
        grid-column: 2 / -1;
      }
    }
  }
}