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

    & .paragraph__title {
      margin-block-end: 2rem;
    }

    & .field--field-title h2 {
      color: var(--color-text-secondary);
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--quote-slider {
      display: flex;
      gap: 2rem;

      & > * {
        flex: 1;
      }

      & .paragraph__title {
        margin-block-end: 0;
      }

      & .field--field-title {
        max-inline-size: 20.25rem;
      }
    }
  }
}