/* 24SP3-4: move the existing photograph toward the right on phones. */
@media (max-width: 640px) {
  html body.subpage .fi-option-section .fi-vblend-mobile-media--option {
    aspect-ratio: 8 / 5 !important;
    background-size: 125% auto !important;
    background-position: 10vw 55% !important;
    background-color: #1a2b5c;
  }
  html body.subpage .fi-option-section .fi-vblend-mobile-media--option::after {
    background:
      linear-gradient(180deg, #1a2b5c 0%, transparent 18%, transparent 82%, #1a2b5c 100%),
      linear-gradient(90deg, #1a2b5c 0%, #1a2b5c 10%, rgba(26,43,92,.55) 15%, rgba(26,43,92,.12) 20%, transparent 24%, transparent 80%, rgba(26,43,92,.12) 87%, rgba(26,43,92,.55) 94%, #1a2b5c 100%) !important;
  }
}

/* Desktop: move the hands into the clear area on the right; keep the soft edge. */
@media (min-width: 769px) {
  html body.subpage .fi-option-section::before {
    --r2-option-photo-offset: clamp(80px, 10vw, 192px);
    background-position: calc(100% + var(--r2-option-photo-offset)) center !important;
  }
}
@media (min-width: 1440px) {
  html body.subpage .fi-option-section::before {
    mask-image: linear-gradient(90deg, transparent calc(100% - 800px + var(--r2-option-photo-offset)), #000 calc(100% - 680px + var(--r2-option-photo-offset)));
  }
}