@layer components {
  .solution {
    position: relative;
    isolation: isolate;
    block-size: 369.25cqi;
    margin-block-start: -10cqi;
    overflow: hidden;
    background-color: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-hero);
  }

  .solution__bg-shape,
  .solution__bg-rays {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 100cqi;
    max-inline-size: none;
    pointer-events: none;
  }

  .solution__bg-shape {
    z-index: -2;
    inset-block-start: 0;
    block-size: 369.25cqi;
  }

  .solution__bg-rays {
    z-index: -1;
    inset-block-start: 0;
    block-size: 90.25cqi;
  }

  .solution__syatyo {
    position: absolute;
    inset-block-start: 0.75cqi;
    inset-inline-start: -1.85cqi;
    inline-size: 42cqi;
    block-size: 54.375cqi;
    max-inline-size: none;
  }

  .solution__title-wrap {
    position: absolute;
    inset-block-start: 19.75cqi;
    inset-inline-start: 15.5cqi;
    inline-size: 68.75cqi;
    block-size: 24cqi;
  }

  .solution__title {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .solution__title-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: contain;
  }

  .solution-card {
    position: absolute;
    inset-inline-start: 10cqi;
    inline-size: 80cqi;
    block-size: 75.25cqi;
    border-radius: 1.25cqi;
    overflow: hidden;
    background-color: oklch(0.95 0 0);
  }

  .solution-card::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    border: 0.75cqi solid oklch(0.3 0 0);
    border-radius: inherit;
    pointer-events: none;
  }

  .solution-card--one {
    inset-block-start: 49.75cqi;
  }

  .solution-card--two {
    inset-block-start: 127cqi;
  }

  .solution-card--three {
    inset-block-start: 204.25cqi;
  }

  .solution-card--four {
    inset-block-start: 281.5cqi;
    block-size: 75.75cqi;
  }

  .solution-card__media {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 80cqi;
    block-size: 45cqi;
    overflow: hidden;
  }

  .solution-card__media::before,
  .solution-card__media::after {
    content: none;
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
  }

  .solution-card--one .solution-card__media::after,
  .solution-card--three .solution-card__media::after {
    content: "";
    background-color: oklch(0.7 0.05 250 / 0.3);
    mix-blend-mode: soft-light;
  }

  .solution-card--four .solution-card__media::before {
    content: "";
    background-color: oklch(0.7 0.05 250 / 0.22);
    mix-blend-mode: overlay;
  }

  .solution-card--four .solution-card__media::after {
    content: "";
    background-color: oklch(0.7 0.05 250 / 0.3);
    mix-blend-mode: color-burn;
  }

  .solution-card__photo {
    position: absolute;
    max-inline-size: none;
    object-fit: cover;
  }

  .solution-card__photo--one {
    inset-block-start: -5cqi;
    inset-inline-start: -4.5cqi;
    inline-size: 89cqi;
    block-size: 50cqi;
  }

  .solution-card__photo--two {
    inset-block-start: -4.25cqi;
    inset-inline-start: -0.25cqi;
    inline-size: 80.25cqi;
    block-size: 53.5cqi;
  }

  .solution-card__photo--three {
    inset-block-start: -8.75cqi;
    inset-inline-start: -51.25cqi;
    inline-size: 145cqi;
    block-size: 62cqi;
  }

  .solution-card__photo--four {
    inset-block-start: -4cqi;
    inset-inline-start: -5.25cqi;
    inline-size: 90.5cqi;
    block-size: 60.25cqi;
  }

  .solution-card__number {
    position: absolute;
    z-index: 2;
    inset-block-start: 4cqi;
    inset-inline-start: 4cqi;
    display: grid;
    place-items: center;
    inline-size: 12.5cqi;
    block-size: 12.5cqi;
    border-radius: var(--radius-full);
    background-color: oklch(0.3 0 0);
    color: oklch(1 0 0);
    font-size: 5.5cqi;
    font-weight: 900;
    line-height: 1;
  }

  .solution-card__body {
    position: absolute;
    inset-block-start: 45cqi;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 30.25cqi;
    background-image: linear-gradient(159deg, oklch(0.86 0 0), oklch(0.97 0 0));
  }

  .solution-card__body--tall {
    block-size: 30.75cqi;
  }

  .solution-card__lead {
    position: absolute;
    inset-block-start: 4cqi;
    inset-inline-start: 0;
    inline-size: 100%;
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2cqi;
    text-align: center;
    white-space: nowrap;
  }

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

  .solution-card__heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: var(--marker-y);
    inset-inline-start: var(--marker-x);
    inline-size: var(--marker-w, 60cqi);
    block-size: 3.5cqi;
    background-color: var(--color-highlight);
  }

  .solution-card__heading span {
    display: block;
  }

  .solution-card--one {
    --marker-x: 7.5cqi;
    --marker-w: 59.75cqi;
    --marker-y: 4.5cqi;
  }

  .solution-card--two {
    --marker-x: 4cqi;
    --marker-w: 39.5cqi;
    --marker-y: 4.25cqi;
  }

  .solution-card--three {
    --marker-x: 7.5cqi;
    --marker-w: 64.75cqi;
    --marker-y: 12cqi;
  }

  .solution-card--four {
    --marker-x: 24.25cqi;
    --marker-w: 31.25cqi;
    --marker-y: 12cqi;
  }
}