@layer component {
  .detail-list-item {
    display: flex;
    gap: 1.25rem;
  }

  .detail-list-item__icon {
    color: var(--color-secondary);
    flex-shrink: 0;
  }

  .detail-list-item__title h3 {
    font: var(--font-body-l-semibold);
    letter-spacing: var(--letter-spacing-body-l-semibold);
  }

  .detail-list-item__description {
    font: var(--font-body-s-regular);
    letter-spacing: var(--letter-spacing-body-s-regular);
    color: var(--color-text-primary);
  }

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

    .detail-list-item__description {
      font: var(--font-body-m-regular);
      letter-spacing: var(--letter-spacing-body-m-regular);
    }
  }
}