@layer components {
  .u-fq {
    container-type: inline-size;
    container-name: u-fq;
    position: relative;
    min-height: 30vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: var(--space-3xl) var(--section-padding-x);
  }

  .u-fq__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .u-fq__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .u-fq__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      oklch(0.08 0.01 60 / 0.78) 0%,
      oklch(0.08 0.01 60 / 0.58) 45%,
      oklch(0.12 0.015 60 / 0.34) 100%
    );
  }

  .u-fq__content {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .u-fq__inner {
    max-width: 58rem;
  }

  .u-fq__accent {
    width: 4.8rem;
    height: 0.4rem;
    background: var(--primary);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-l);
  }

  .u-fq__quote {
    margin: 0;
    padding: 0;
    border: none;
  }

  .u-fq__headline {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--always-light);
    line-height: 1.15;
    margin-bottom: var(--space-m);
    letter-spacing: -0.01em;
  }

  .u-fq__body {
    font-size: var(--text-ml);
    color: var(--always-light);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 48rem;
  }

  @container u-fq (max-width: 768px) {
    .u-fq__overlay {
      background: linear-gradient(
        180deg,
        oklch(0.08 0.01 60 / 0.75) 0%,
        oklch(0.12 0.015 60 / 0.48) 100%
      );
    }
  }

  @container u-fq (max-width: 640px) {
    .u-fq__headline { font-size: var(--text-2xl); }
    .u-fq__body { font-size: var(--text-m); }
    .u-fq__accent { width: 3.6rem; height: 0.3rem; }
  }
}