#six {
  .setup {
    height: 416px;
    background: var(--hra-neutral-100);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-inline: var(--story-section-inline-padding);

    .setup-text {
      width: 100%;
      max-width: 448px;

      p {
        color: var(--hra-neutral-variant-30) !important;
      }
    }
  }

  .setup2 {
    background: var(--hra-neutral-96);
  }

  .setup3 {
    background: var(--hra-neutral-98);
  }


  .intro,
  .section2-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
    box-sizing: border-box;
    padding: 80px var(--story-section-inline-padding);
    width: 100%;
    height: fit-content;

    .text {
      width: 100%;
      margin: 80px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 960px;
      gap: 160px;

      p {
        max-width: 600px;
        color: var(--hra-neutral-variant-30);
      }

      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

  }

  .section3 {
    background: var(--hra-neutral-100);
  }

  section.section4 {
    box-sizing: border-box;
    height: auto;
    min-height: var(--story-viewport-height);
    overflow: visible;
    padding: clamp(4rem, 8vw, 8rem) var(--story-section-inline-padding);
    background: var(--hra-neutral-96);
  }

  .intro {
    background: linear-gradient(var(--hra-neutral-98), var(--hra-neutral-96));
  }

  .image-card {
    box-sizing: border-box;
    display: flex;
    width: min(100%, 37.5rem);
    margin: 0;
    padding: 2.5rem 1.25rem;
    background: var(--hra-neutral-100);
    border-radius: 1rem;
    box-shadow: 0 5px 16px 0 rgb(0 0 0 / 16%);

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  &.illustration-reveals-enabled .story-illustration {
    --illustration-reveal-x: 0;
    --illustration-reveal-rotation: 0deg;

    opacity: 0;
    transform: translate3d(var(--illustration-reveal-x), 2rem, 0) scale(0.96) rotate(var(--illustration-reveal-rotation));
    transition:
      opacity 650ms cubic-bezier(0.2, 0, 0, 1),
      transform 650ms cubic-bezier(0.2, 0, 0, 1);

    &.story-illustration--from-left {
      --illustration-reveal-x: -3rem;
      --illustration-reveal-rotation: -1deg;
    }

    &.story-illustration--from-right {
      --illustration-reveal-x: 3rem;
      --illustration-reveal-rotation: 1deg;
    }

    &.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1) rotate(0);
    }
  }

  .fadeimage,
  .scene5-1,
  .scene5-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: var(--story-viewport-height);
    width: 100%;
  }

  .body-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
  }

  .body-outline {
    max-width: 100%;
    max-height: 100%;
  }

  .picture1 {
    background: linear-gradient(var(--hra-neutral-96), var(--hra-neutral-98));
  }

  .picture2 {
    background: linear-gradient(var(--hra-neutral-98), var(--hra-neutral-96));
  }

  .section2-2 {
    background: linear-gradient(var(--hra-neutral-96), var(--hra-neutral-98));
  }

  .mouse {
    height: 100%;
    width: 100%;
    bottom: 0;
    display: flex;
    align-items: center;

    flex-direction: column;

    @media (min-width: 1440px) {
      flex-direction: row;
      justify-content: center;
      gap: 2.5rem;
    }

    .info-text {
      width: 448px;
      min-height: 176px;
      max-width: 100%;
    }

    .mouse-image {
      width: 920px;
      height: 920px;
      max-width: 100%;
      position: relative;

      @media (min-width: 1440px) {
        max-width: 50%;
        max-height: 80%;
      }

      .all,
      .thymus,
      .liver,
      .spleen,
      .pancreas {
        width: 920px;
        max-height: 100%;
        display: flex;
        justify-content: center;
        height: 100%;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        max-width: 50%;
        left: 25%;
      }
    }

    .label {
      position: absolute;
      background: var(--hra-neutral-20);
      color: var(--hra-neutral-95);
      padding: 1.5rem;
      border-radius: 1.5rem;
      font: var(--hra-type-title-large);
      letter-spacing: var(--hra-type-title-large-tracking);
    }
  }

  @media (max-width: 1439px) {
    .scene5-1 {
      align-items: stretch;
    }

    .mouse {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      align-items: stretch;
      box-sizing: border-box;
      padding-block: clamp(0.75rem, 2vh, 1.5rem);
      gap: clamp(0.5rem, 1.5vh, 1rem);

      .info-text {
        align-self: start;
        justify-self: center;
        width: min(100%, 44rem);
        min-height: 0;
      }

      .mouse-image {
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow: hidden;

        .all,
        .thymus,
        .liver,
        .spleen,
        .pancreas {
          inset: 0;
          align-items: center;
          width: 100%;
          height: 100%;
          max-width: none;

          img {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
      }

      .label {
        max-width: calc(100% - 1rem);
        padding: 0.5rem 0.75rem;
        border-radius: 1rem;
        font: var(--hra-type-label-large);
        letter-spacing: var(--hra-type-label-large-tracking);
        transform: translate(-50%, -50%);
      }
    }

    .mouse .thymus .label,
    .mouse .spleen .label,
    .mouse .pancreas .label {
      left: 65%;
    }

    .mouse .liver .label {
      left: 25%;
    }
  }

  .thymus .label {
    top: 23%;
    left: 80%;
  }

  .liver .label {
    top: 45%;
    left: 0%;
  }

  .spleen .label {
    top: 47%;
    left: 80%;
  }

  .pancreas .label {
    top: 50%;
    left: 80%;
  }


  @media (prefers-reduced-motion: reduce) {
    .story-illustration {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    .section2,
    .mouse-image {
      display: none !important;
    }

    .scene5-1,
    .mouse {
      position: static;
      height: auto;
    }

    .mouse {
      padding: 4rem 1rem;

      .info-text {
        width: min(100%, 448px);
        height: auto;
      }
    }

    .scroll-instruction {
      display: none;
    }
  }
}