.section-bridge {
  height: clamp(8rem, 18vw, 15rem);
  isolation: isolate;
  overflow: clip;
  pointer-events: none;
  position: relative;
}

.section-bridge img {
  aspect-ratio: 1;
  filter: drop-shadow(0 1.2rem 1.2rem rgb(65 31 18 / 22%));
  object-fit: cover;
  position: absolute;
  width: clamp(9rem, 24vw, 19rem);
  will-change: transform;
}

.bridge-story-catalog { background: linear-gradient(to bottom, var(--caramel) 0 50%, var(--oat) 50%); }
.bridge-story-catalog img { left: 8%; top: -14%; transform: rotate(-9deg); }
.bridge-bio-marquee { background: linear-gradient(to bottom, var(--sand) 0 52%, var(--espresso) 52%); }
.bridge-bio-marquee img { right: 9%; top: -10%; transform: rotate(7deg); }
.bridge-gallery-manifesto { background: linear-gradient(to bottom, var(--sand) 0 48%, var(--oat) 48%); }
.bridge-gallery-manifesto img { left: 50%; top: -18%; transform: translateX(-50%) rotate(5deg); }

.has-motion .bio-portrait,
.has-motion .bio-background-name,
.has-motion main > section h2 { will-change: opacity, transform; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .editorial-card,
  .idea-card { transition: border-color 180ms ease, transform 220ms var(--ease-out); }
  .editorial-card img,
  .idea-card img { transition: transform 240ms var(--ease-out); }
  .editorial-card:hover,
  .idea-card:hover { border-color: var(--cream); transform: translateY(-.45rem) rotate(-.5deg); }
  .editorial-card:hover img,
  .idea-card:hover img { transform: scale(1.035); }
}

@media (min-width: 48rem) {
  .bridge-story-catalog img { left: 18%; }
  .bridge-bio-marquee img { right: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .section-bridge img,
  .bio-background-name,
  .bio-portrait,
  main > section h2 { opacity: 1; transform: none; }
}