.why-different { padding-block: var(--space-why-different-section); }
.why-different__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-section-heading); margin-block-end: var(--space-why-different-intro); }
.why-different__description { max-inline-size: 1103px; margin: 0; color: var(--color-text-muted); font-size: var(--fs-difference-description); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.why-different__description--mobile, .why-different__caption-break { display: none; }
.why-different__stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-grid); }
.why-different__story { --story-column: 2; --story-width: 65.8933%; display: contents; }
.why-different__story--featured { --story-width: 100%; }
.why-different__story--left { --story-column: 1; }
.why-different__media { position: relative; display: grid; grid-template: 1fr / 1fr; grid-column: var(--story-column); grid-row: var(--story-row); inline-size: var(--story-width); min-inline-size: 0; aspect-ratio: 1; isolation: isolate; container-type: inline-size; border-radius: var(--radius-difference-photo); overflow: clip; }
.why-different__image { position: absolute; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius-difference-photo); }
.why-different__story--left .why-different__media::after { position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-difference-photo); background: var(--color-difference-photo-tint); content: ''; pointer-events: none; }
.why-different__metric { grid-area: 1 / 1; z-index: 1; }
.why-different__metric--revenue { align-self: start; justify-self: start; margin: 50px; }
.why-different__metric--average { align-self: end; justify-self: end; margin: var(--space-difference-overlay); }
.why-different__metric--leak { align-self: end; justify-self: start; margin: 60px 0 60px 87px; }
.why-different__metric--losses { align-self: end; justify-self: start; margin: var(--space-difference-overlay); }
.why-different__caption { grid-column: var(--story-column); grid-row: calc(var(--story-row) + 1); align-self: start; inline-size: var(--story-width); margin-block-start: var(--space-difference-caption); font-size: var(--fs-difference-caption); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.why-different__story--featured .why-different__caption { max-inline-size: 624px; }
.why-different__caption-value { color: var(--color-trusted); font-weight: var(--fw-bold); }

@media (min-width: 1024px) {
  .why-different__image[data-difference-parallax] { transform: translate3d(0, var(--difference-parallax-y, 0), 0) scale(1.26); will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .why-different__image[data-difference-parallax] { transform: none; }
}

@media (max-width: 1023px) {
  .why-different__intro { align-items: center; text-align: center; }
  .why-different__description { line-height: 1.25; }
  .why-different__description--desktop { display: none; }
  .why-different__description--mobile, .why-different__caption-break { display: initial; }
  .why-different__stories { display: flex; flex-direction: column; gap: var(--space-difference-stories); }
  .why-different__story { display: flex; flex-direction: column; gap: var(--space-difference-caption); margin: 0; }
  .why-different__media, .why-different__caption { inline-size: 100%; }
  .why-different__caption { margin: 0; }
  .why-different__story--featured .why-different__caption { max-inline-size: none; }
  .why-different__story--featured .why-different__image { object-position: left top; transform: scale(1.1074); transform-origin: top left; border-radius: 0; }
  .why-different__media .why-different__metric { --metric-unit: min(1px, calc(100cqw / 768.32)); }
  .why-different__metric--revenue { margin: 4.08cqw; }
  .why-different__metric--average { margin: 4.08cqw; }
  .why-different__metric--leak { margin: 7cqw; }
  .why-different__metric--losses { justify-self: end; margin: 7cqw; }
}