@layer components {
  .trouble {
    position: relative;
    isolation: isolate;
    block-size: 301.25cqi;
    overflow: hidden;
    background-color: oklch(1 0 0);
    background-image:
      url("../../assets/images/trouble/bg-shape.svg"),
      url("../../assets/images/trouble/bg-photo.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size:
      100cqi 301.25cqi,
      133cqi 200.5cqi;
    background-attachment: fixed;
    color: var(--color-text-primary);
    font-family: var(--font-hero);
  }

  .trouble__bg-photo {
    display: none;
  }

  .trouble__bg-shape {
    display: none;
  }

  .trouble__label {
    position: absolute;
    inset-block-start: 6.2cqi;
    inset-inline-start: 3.25cqi;
    inline-size: 25.5cqi;
    block-size: 11.5cqi;
    transform: rotate(-5deg);
  }

  .trouble__label-text {
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    inset-inline-start: 1.75cqi;
    color: var(--color-highlight);
    font-family: var(--font-hero);
    font-size: 3.8cqi;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0.35cqi 0.35cqi 0 oklch(0.14 0 0);
  }

  .trouble__label-line {
    position: absolute;
    inset-block-start: 3.1cqi;
    inset-inline-start: 0;
    inline-size: 25.25cqi;
    block-size: 7.35cqi;
    max-inline-size: none;
  }

  .trouble__title {
    position: absolute;
    inset-block-start: 19.5cqi;
    inset-inline-start: 0;
    inline-size: 100cqi;
    color: oklch(1 0 0);
    font-size: 6cqi;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
  }

  .trouble__arrow {
    position: absolute;
    inset-block-start: 30.25cqi;
    inset-inline-start: 47.75cqi;
    inline-size: 5.55cqi;
    block-size: 8.95cqi;
    max-inline-size: none;
  }

  .trouble-card {
    position: absolute;
    inset-inline-start: 10cqi;
    inline-size: 80cqi;
    border: 0.75cqi solid oklch(1 0 0);
    border-radius: 1.25cqi;
    background-image: linear-gradient(136deg, oklch(0.86 0 0), oklch(0.97 0 0));
    box-shadow: inset 0 0 0 0.25cqi oklch(1 0 0 / 0.16);
  }

  .trouble-card--first {
    inset-block-start: 42.75cqi;
    block-size: 77.25cqi;
    --marker-w: 69.75cqi;
    --text-leading: 1.4;
  }

  .trouble-card--second {
    inset-block-start: 126cqi;
    block-size: 73cqi;
    --marker-w: 47.5cqi;
    --text-leading: 1.4;
  }

  .trouble-card--third {
    inset-block-start: 205cqi;
    block-size: 73.25cqi;
    --marker-w: 52cqi;
    --text-leading: 1.3;
  }

  .trouble-card__heading {
    position: absolute;
    z-index: 2;
    inset-block-start: 7.5cqi;
    inset-inline-start: 0;
    inline-size: 100%;
    font-size: 6cqi;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  .trouble-card--first .trouble-card__heading {
    inset-block-start: 8cqi;
  }

  .trouble-card__heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: 4.25cqi;
    inset-inline-start: 50%;
    inline-size: var(--marker-w);
    block-size: 3.5cqi;
    transform: translateX(-50%);
    background-color: oklch(0.82 0.07 252);
  }

  .trouble-card__text {
    position: absolute;
    inset-block-start: 18.75cqi;
    inset-inline-start: 9cqi;
    inline-size: 62cqi;
    font-size: 4cqi;
    font-weight: 700;
    line-height: var(--text-leading);
    letter-spacing: 0;
    text-align: center;
  }

  .trouble-card__text span {
    display: block;
  }

  .trouble-card__person {
    position: absolute;
    max-inline-size: none;
  }

  .trouble-card__person--first {
    inset-block-start: 39.25cqi;
    inset-inline-start: 21.75cqi;
    inline-size: 31.5cqi;
    block-size: 41cqi;
  }

  .trouble-card__person--second {
    inset-block-start: 33.75cqi;
    inset-inline-start: 21.25cqi;
    inline-size: 34.25cqi;
    block-size: 41cqi;
  }

  .trouble-card__person--third {
    inset-block-start: 35.75cqi;
    inset-inline-start: 21.25cqi;
    inline-size: 33cqi;
    block-size: 40.5cqi;
  }
}