@layer component {
  .paragraph--icon-card {
    display: flex;
    gap: 1.25rem;

    & .field--field-title h3 {
      font: var(--font-head-xs-semibold);
      letter-spacing: var(--letter-spacing-head-xs-semibold);
    }

    & .field--field-description {
      font: var(--font-body-m-regular);
      letter-spacing: var(--letter-spacing-body-m-regular);
    }
  }

  .icon-card__image {
    max-inline-size: 3.75rem;
    flex-shrink: 0;
  }

  .icon-card__content > * + * {
    margin-block-start: 0.375rem;
  }

  @media screen and (min-width: 48rem) {
    .paragraph--icon-card {
      display: block;

      & .icon-card__image {
        max-inline-size: none;
      }

      & .icon-card__image img {
        margin-block-end: 1rem;
      }

      & .field--field-description {
        font: var(--font-body-l-regular);
        letter-spacing: var(--letter-spacing-body-l-regular);
      }
    }
  }
}