@layer sections {
#story { padding: var(--space-1) 0; }
#story .st-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
#story .st-stage { position: sticky; top: calc(var(--navigation-height, 92px) + 16px); }
#story .st-frame { height: min(78svh, 640px); overflow: hidden; border-radius: var(--radius-4) var(--radius-1) var(--radius-1) var(--radius-1); background: var(--color-3); }
#story .st-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
#story .st-text { display: grid; }
#story .st-text > .m-text-2 { font-size: clamp(40px, 4.6vw, 68px); max-width: 9ch; padding-bottom: 24px; }
#story .st-step { display: grid; align-content: center; gap: 14px; min-height: 64svh; padding: 32px 0; border-top: 1.5px solid var(--color-2); }
#story .st-step .m-text-3 { font-size: clamp(26px, 2.6vw, 36px); max-width: 16ch; }
#story .st-step .m-text { max-width: 42ch; }
#story .st-step .m-badge { justify-self: start; background: var(--color-3); }
@media (max-width: 900px) {
  #story .st-grid { grid-template-columns: 1fr; gap: 0; }
  #story .st-stage { top: 0; z-index: 1; margin-top: calc(-1 * var(--navigation-height, 72px)); padding: calc(var(--navigation-height, 72px) + 8px) 0 12px; background: var(--color-1); }
  #story .st-frame { height: 32svh; border-radius: 120px var(--radius-3) var(--radius-3) var(--radius-3); }
  #story .st-text { position: relative; z-index: 0; padding-top: 28px; background: var(--color-1); }
  #story .st-step { min-height: 52svh; align-content: end; }
}
}