@layer component {
  .paragraph--quote {
    & > * + * {
      margin-block-start: 1.125rem;
    }

    & .field--field-description {
      color: var(--color-primary);
      font: var(--font-head-s-light);
      letter-spacing: var(--letter-spacing-head-s-light);
    }

    & .field--field-source {
      color: var(--color-text-tertiary);
      font: var(--font-body-xl-semibold);
      letter-spacing: var(--letter-spacing-body-xl-semibold);
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--quote {
      & .field--field-description {
        font: var(--font-head-m-light);
        letter-spacing: var(--letter-spacing-head-m-light);
      }
    }
  }
}