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

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

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

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

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

  .ka-fq__inner {
    max-width: 60rem;
  }

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

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

  .ka-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.015em;
  }

  .ka-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: 50rem;
  }

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

  @container ka-fq (max-width: 640px) {
    .ka-fq {
      padding: var(--space-3xl) var(--section-padding-x);
    }

    .ka-fq__headline {
      font-size: var(--text-2xl);
    }

    .ka-fq__body {
      font-size: var(--text-m);
    }

    .ka-fq__accent {
      width: 3.6rem;
      height: 0.3rem;
    }
  }
}