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

    & .field--field-title h2 {
      margin-block-end: clamp(0.75rem, 3vw, 2rem);
    }

    & .field--field-items {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--tier-blocks {
      & .field--field-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        gap: 0.75rem 2rem;
      }
    }
  }
}