@layer component {
  .paragraph--highlight-cards {
    margin-block: var(--layout-component-block-space);

    & .field--field-cards {
      container-type: inline-size;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--highlight-cards {
      & .field--field-cards {
        gap: 2.5rem;
      }
    }
  }
}