@layer component {
  .paragraph--quick-links {
    background-color: var(--color-background-light);
    padding-block: 2rem 2.5rem;

    & .field--field-title h2 {
      margin-block-end: 2rem;
    }

    & .paragraph + .paragraph {
      margin-block-start: 1.25rem;
    }
  }

  .paragraph--quick-links.paragraph--view-mode--header {
    padding-inline: 1.75rem;

    & .field--field-title h2 {
      font: var(--font-head-m-light);
      letter-spacing: var(--letter-spacing-head-m-light);
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--quick-links {
      padding-block: 2.25rem 3rem;
      & .quick-links {
        display: flex;
        gap: 3.75rem;
      }

      & .field--field-title h2 {
        font: var(--font-head-l-light);
        letter-spacing: var(--letter-spacing-head-l-light);
      }

      & .paragraph + .paragraph {
        margin-block-start: 0;
      }
    }

    .paragraph--quick-links.paragraph--view-mode--header {
      padding-inline: 3rem;
      margin-inline-start: clamp(1rem, 3vw, 6.5rem);
      margin-inline-end: var(--layout-padding-inline-negative);

      & .paragraph + .paragraph {
        margin-block-start: 2rem;
      }
    }
  }
}