.story { position: relative; isolation: isolate; padding-block: 80px 159px; background: var(--color-canvas); }
.story__texture-wrap { position: absolute; z-index: 0; inset-inline: 0; top: 267px; height: 1045px; overflow: hidden; pointer-events: none; }
.story__texture { position: absolute; top: 44px; left: 50%; width: max(100%, 1440px); max-width: none; height: 968px; transform: translateX(-50%); object-fit: cover; opacity: .14; }
.story__texture-fade { position: absolute; z-index: 1; inset-inline: 0; height: 212px; background-repeat: no-repeat; background-size: 100% 179px, 100% 179px; }
.story__texture-fade--top { top: 0; background-image: linear-gradient(to bottom, var(--color-canvas), transparent), linear-gradient(to bottom, var(--color-canvas), transparent); background-position: 0 0, 0 33px; }
.story__texture-fade--bottom { bottom: 0; background-image: linear-gradient(to top, var(--color-canvas), transparent), linear-gradient(to top, var(--color-canvas), transparent); background-position: 0 33px, 0 0; }
.story__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 570px); column-gap: 80px; align-items: start; }
.story__copy { min-inline-size: 0; }
.story__title { font-family: var(--font-display); font-size: 70px; font-weight: 500; line-height: .94; text-transform: uppercase; }
.story__intro, .story__outro { width: min(100%, 494px); color: var(--color-secondary); font-size: 16px; font-weight: 500; line-height: 22px; text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: pre-line; }
.story__intro { margin-top: 47px; }
.story__outro { margin: 32px 0 0 233px; }
.story__figures { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); grid-template-rows: repeat(100, minmax(0, 1fr)); aspect-ratio: 570 / 532; margin-top: -161px; }
.story__figure { min-inline-size: 0; }
.story__figure--portrait { grid-column: 42 / 101; grid-row: 1 / 88; }
.story__figure--workshop { grid-column: 1 / 39; grid-row: 55 / 101; z-index: 1; }
@media (min-width: 640px) and (max-width: 1359px) {
  .story { padding-block: 80px 120px; }
  .story__inner { display: flex; flex-direction: column; }
  .story__copy { display: contents; }
  .story__title { max-width: 760px; }
  .story__intro, .story__outro { width: min(100%, 590px); margin-left: 0; }
  .story__intro { margin-top: 47px; }
  .story__figures { order: 2; align-self: center; width: min(100%, 570px); margin-top: 32px; }
  .story__outro { order: 3; margin-top: 32px; }
}
@media (max-width: 639px) {
  .story { padding-block: 60px 100px; }
  .story__texture-wrap { top: 705px; height: 1645px; }
  .story__texture { left: calc(50% + 195px); height: 1601px; }
  .story__inner { display: flex; flex-direction: column; }
  .story__copy { display: contents; }
  .story__title { align-self: center; max-width: 352px; text-align: center; font-size: 48px; line-height: .94; }
  .story__intro, .story__outro { width: 100%; margin-left: 0; }
  .story__intro { margin-top: 37px; }
  .story__figures { order: 2; width: 100%; display: grid; aspect-ratio: 370 / 334; margin-top: 25px; }
  .story__figure--portrait { grid-column: 1 / 101; grid-row: 1 / 88; }
  .story__figure--workshop { grid-column: 5 / 34; grid-row: 64 / 101; }
  .story__outro { order: 3; margin-top: 25px; }
}