.OtherHalf__section {
  position: relative;
  display: grid;
  gap: clamp(4rem, 12vh, 10rem);
  padding: clamp(4rem, 14vh, 12rem) clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;

  opacity: 0.5;
  filter: saturate(0.25);
  transition:
    opacity var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.OtherHalf__section.OtherHalf__resolved {
  opacity: 1;
  filter: saturate(1);
}

@media (min-width: 1024px) and (hover: hover) {
  .OtherHalf__section {
    filter: saturate(0.25) blur(4px);
  }

  .OtherHalf__section.OtherHalf__resolved {
    filter: saturate(1) blur(0px);
  }
}

.OtherHalf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.OtherHalf__half {
  min-width: 0;
}

/* The still swaps sides row to row; the figure always takes the other column. */
.OtherHalf__stillRight {
  order: 2;
}

.OtherHalf__figure {
  display: grid;
  gap: 1rem;
  color: var(--fg);
}

/* The part that flies in, kept separate from the half so it does not collide
   with the parallax transform the half already carries. */
.OtherHalf__plate {
  position: relative;
}

.OtherHalf__still {
  width: 100%;
}

@media (max-width: 720px) {
  .OtherHalf__row {
    grid-template-columns: 1fr;
  }

  /* Stacked, the alternation has nothing to alternate against — keep the
     still above its figure in every row rather than reordering unpredictably. */
  .OtherHalf__stillRight {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .OtherHalf__section,
  .OtherHalf__section.OtherHalf__resolved {
    filter: none;
  }

  .OtherHalf__section {
    transition: opacity var(--dur) var(--ease);
  }

  .OtherHalf__half,
  .OtherHalf__plate {
    transform: none !important;
  }

  .OtherHalf__plate {
    opacity: 1 !important;
  }
}