/* gallery-space — geometry only. The flat .sk-cell-grid is the scripts-off and
   reduced-motion truth; the engine builds the 3D stage and gates every enhanced
   rule on data-space="on". JS writes NUMBERS, CSS owns every transform. */

.sk-gallery-space {
  position: relative;
  overflow: clip;
  padding-block: 0;
}

/* Climbs, and declares NO ground: the cover holds the sphere clear of the
 * bar, so the section's own surface is what stands under it. */
.sk-component[data-sk="gallery-space"]:has(.sk-gallery-space-cell) {
  --sk-gallery-space-cover: var(--sk-chrome-cover, 0px);
  margin-block-start: calc(-1 * var(--sk-chrome-clear, 0px));
}

/* Full-bleed band row. The cover is a TOP pad plus the same growth below,
 * never symmetric (the cloud centres in its stage) and never out of the
 * stage (the cloud overflows it). */
.sk-gallery-space-row {
  position: relative;
  box-sizing: border-box;
  padding-block: var(--sk-gallery-space-cover, 0px) 0;
  padding-inline: var(--brand-space-2, var(--kit-space-2, 0.65rem));
  /* Matches the top pad, so the stage keeps its size and the box carries the
   * room. The cover is the bar's box plus its scrim's reach: artwork stopping
   * at the bar's own edge still sits inside the fade. */
  height: calc(
    var(--sk-gallery-space-h, clamp(24rem, 46vw, 34rem)) + var(--sk-gallery-space-cover, 0px)
  );
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-row {
  overflow: hidden;
}

/* ---- knobs (unitless; engine reads via getComputedStyle) ---- */
.sk-gallery-space {
  --sk-gallery-space-depth-factor: 1;
  --sk-gallery-space-perspective-factor: 1.7;
  --sk-gallery-space-spin: 0; /* idle deg/s */
  --sk-gallery-space-cell: 1; /* cell size multiplier */
  --sk-gallery-space-security-gap: 16; /* px; min edge clearance between tiles */
  --sk-gallery-space-fit: 1; /* uniform scale; engine shrinks to fit viewport */
  --sk-gallery-space-perspective: calc(
    var(--sk-gallery-space-radius, 420) * var(--sk-gallery-space-perspective-factor, 1.7)
  );
  /* live orientation — engine-written every frame */
  --sk-gallery-space-yaw: 0;
  --sk-gallery-space-pitch: 0;
  --sk-gallery-space-roll: 0;
  --sk-gallery-space-dolly: 0;
  --sk-gallery-space-dolly-base: 0;
  --sk-gallery-space-pan-x: 0;
  --sk-gallery-space-pan-y: 0;
  --sk-gallery-space-pan-z: 0;
  /* Parallax portal — excursion knob (%) and zoom; engine writes shift per tile. */
  --sk-gallery-space-portal-excursion: 0;
  --sk-gallery-space-portal-zoom: 1;
  /* Media corner rounding */
  --sk-gallery-space-media-radius: var(--sk-media-radius);
  /* Color Face rear — 20% brighter than the section background. */
  --sk-gallery-space-backface: color-mix(in srgb, var(--sk-bg) 80%, white);
  --sk-gallery-space-hover-scale: 1.08;
  --sk-gallery-space-hover-lift: -6px;
  --sk-gallery-space-magnet: 5; /* px pull toward pointer at tile edge */
  --sk-gallery-space-drag-scale-shrink: 0.25; /* uniform cloud pinch while dragging */
  --sk-gallery-space-drag-scale: 1;
  /* The WHOLE load-in, first tile to last: the type's stagger share splits it
       between each tile's run and the sweep across the roster. */
  --sk-gallery-space-arrive-stagger: 0.45;
  --sk-gallery-space-arrive-total: calc(var(--sk-gallery-space-arrive-s, 1.5) * 1s);
  --sk-gallery-space-arrive-dur: calc(
    var(--sk-gallery-space-arrive-total) * (1 - var(--sk-gallery-space-arrive-stagger))
  );
  --sk-gallery-space-arrive-spread: calc(
    var(--sk-gallery-space-arrive-total) * var(--sk-gallery-space-arrive-stagger)
  );
  /* Arrival TRAVEL — × the kit's motion dial, as the frameworks' offsets are
     (negative runs every type from the other side). Each type arms its own;
     the rest hold zero so the poses below compose to nothing. */
  --sk-gallery-space-arrive-depth: 0px; /* float: media run-in along the view axis */
  --sk-gallery-space-arrive-from: 0; /* expand: −1 from the origin, +1 from twice out */
  --sk-gallery-space-arrive-swing: 0deg; /* swing: orbit about the shape's axis */
  --sk-gallery-space-arrive-drop: 0px; /* drop: fall along the shape's axis */
}
.sk-gallery-space[data-arrival="fade"] {
  --sk-gallery-space-arrive-stagger: 0;
}
.sk-gallery-space[data-arrival="float"] {
  --sk-gallery-space-arrive-depth: calc(
    var(--sk-gallery-space-radius, 420) * 0.4px * var(--sk-anim-intensity, 1)
  );
}
.sk-gallery-space[data-arrival="expand"] {
  --sk-gallery-space-arrive-from: calc(-1 * var(--sk-anim-intensity, 1));
}
/* Inside the shell the origin IS the camera, so the tiles close in from
   beyond the wall instead of flying out through the viewer. */
.sk-gallery-space[data-arrival="expand"][data-inside-shell="on"] {
  --sk-gallery-space-arrive-from: var(--sk-anim-intensity, 1);
}
/* Swing follows the idle spin's sense, so the tiles arrive the way the
   shape is already turning. */
.sk-gallery-space[data-arrival="swing"] {
  --sk-gallery-space-arrive-swing: calc(-90deg * var(--sk-anim-intensity, 1));
}
.sk-gallery-space[data-arrival="swing"][data-idle="spin-ccw"] {
  --sk-gallery-space-arrive-swing: calc(90deg * var(--sk-anim-intensity, 1));
}
.sk-gallery-space[data-arrival="drop"] {
  --sk-gallery-space-arrive-drop: calc(
    var(--sk-gallery-space-radius, 420) * -0.5px * var(--sk-anim-intensity, 1)
  );
}
.sk-gallery-space[data-corners="small"] {
  --sk-gallery-space-media-radius: 0.5rem;
}
.sk-gallery-space[data-corners="large"] {
  --sk-gallery-space-media-radius: 1.25rem;
}
.sk-gallery-space[data-parallax="subtle"] {
  --sk-gallery-space-portal-excursion: 10;
  --sk-gallery-space-portal-zoom: 1.2;
}
.sk-gallery-space[data-parallax="deep"] {
  --sk-gallery-space-portal-excursion: 40;
  --sk-gallery-space-portal-zoom: 1.8;
}
.sk-gallery-space[data-distance="far"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.72);
  --sk-gallery-space-perspective-factor: 1.52;
}
.sk-gallery-space[data-distance="normal"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.8);
  --sk-gallery-space-perspective-factor: 1.36;
}
.sk-gallery-space[data-distance="close"] {
  --sk-gallery-space-dolly-base: calc(var(--sk-gallery-space-radius, 420) * 0.9);
  --sk-gallery-space-perspective-factor: 1.32;
}
/* Sphere / helix close: dolly by the perspective distance so the viewer lands
   at the shape origin (inside the shell). */
.sk-gallery-space[data-distance="close"][data-shape="sphere"],
.sk-gallery-space[data-distance="close"][data-shape="helix"] {
  --sk-gallery-space-perspective-factor: 0.85;
  --sk-gallery-space-dolly-base: var(--sk-gallery-space-perspective);
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"]) {
  --sk-gallery-space-spin: 6;
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"])[data-speed="slow"] {
  --sk-gallery-space-spin: 2.5;
}
.sk-gallery-space:is([data-idle="spin-cw"], [data-idle="spin-ccw"])[data-speed="fast"] {
  --sk-gallery-space-spin: 14;
}

/* ---- flat fallback grid (server truth) ---- */
.sk-gallery-space-cells {
  gap: var(--kit-space-3);
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-cells {
  display: none;
}
/* Held from first paint under the kit's arming gate, which lands BEFORE paint:
   the engine re-parents these cells at body-end, and an unheld grid paints once
   flat and then jumps into the sphere. The hold rescues itself when no engine
   speaks, so the truth is never hidden for good. */
@media (prefers-reduced-motion: no-preference) {
  html[data-sk-js] .sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cells {
    animation: sk-gallery-space-rescue 0.6s var(--sk-ease-out) 2s both;
  }
}
@keyframes sk-gallery-space-rescue {
  from {
    opacity: 0;
  }
}

/* ---- stage ---- */
.sk-gallery-space-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  perspective: calc(var(--sk-gallery-space-perspective) * 1px);
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-stage {
  min-height: 0;
  touch-action: none;
}
.sk-gallery-space[data-dragging] .sk-gallery-space-stage {
  cursor: grabbing;
}

/* cloud: dolly, then Rz·Rx·Ry — the ONLY forward chain */
.sk-gallery-space-cloud {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(
      calc(var(--sk-gallery-space-pan-x, 0) * 1px),
      calc(var(--sk-gallery-space-pan-y, 0) * 1px),
      calc(
        (
            var(--sk-gallery-space-dolly-base, 0) + var(--sk-gallery-space-dolly, 0) +
              var(--sk-gallery-space-pan-z, 0)
          ) *
          1px
      )
    )
    rotateZ(calc(var(--sk-gallery-space-roll, 0) * 1deg))
    rotateX(calc(var(--sk-gallery-space-pitch, 0) * 1deg))
    rotateY(calc(var(--sk-gallery-space-yaw, 0) * 1deg))
    scale3d(
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1)),
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1)),
      calc(var(--sk-gallery-space-fit, 1) * var(--sk-gallery-space-drag-scale, 1))
    );
}

/* ---- cells ----
   place   = translate3d(position) · R(orientation)   (JS, once)
   unplace = R(orientation)⁻¹                         (JS, once)
   Scoped to data-space="on": unscoped, absolute cells collapse the flat grid. */
.sk-gallery-space[data-space="on"] .sk-gallery-space-cell {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: calc(var(--sk-gallery-space-cell, 1) * clamp(130px, 15vw, 220px));
  height: auto;
  transform-style: preserve-3d;
}

/* The empty fallback is deliberate: `var(--x,)` substitutes NOTHING when the
   type declares no pose, so the chain stays exactly the one below it. */

/* camera facing: undo orientation (unplace), then the cloud's rotations
   in EXACT reverse order. Nothing else folded in. */
.sk-gallery-space[data-space="on"][data-facing="camera"] .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-arrive-pose,) var(--sk-gallery-space-place)
    var(--sk-gallery-space-unplace) rotateY(calc(var(--sk-gallery-space-yaw, 0) * -1deg))
    rotateX(calc(var(--sk-gallery-space-pitch, 0) * -1deg))
    rotateZ(calc(var(--sk-gallery-space-roll, 0) * -1deg));
}

/* Close inside shell (sphere / helix): ride the surface. Billboarding
   here hides the media; mirrored rears are hard-ruled in CSS below. */
.sk-gallery-space[data-space="on"][data-facing="camera"][data-inside-shell="on"]
  .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-arrive-pose,) var(--sk-gallery-space-place);
}

/* surface facing: ride the invisible parametric surface */
.sk-gallery-space[data-facing="surface"] .sk-gallery-space-cell {
  transform: var(--sk-gallery-space-arrive-pose,) var(--sk-gallery-space-place);
}

/* ---- backface ---- */
/* Close: hard rule — always mirrored rear; stored backface is ignored. */
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media,
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media .sk-art {
  backface-visibility: visible;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-back {
  display: none;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
}
.sk-gallery-space[data-space="on"][data-distance="close"] .sk-gallery-space-media .sk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Close inside shell: camera at shape origin — inward tiles, front faces visible. */
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media,
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media-face,
.sk-gallery-space[data-inside-shell="on"] .sk-gallery-space-media .sk-art {
  backface-visibility: hidden;
}

/* Far/normal: respect author backface pick. */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media
  .sk-art {
  backface-visibility: hidden;
}

.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media
  .sk-art {
  backface-visibility: visible;
}

/* Color Face — solid rear tinted from the band background (preserve-3d stack;
   overflow only on the face). */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media {
  transform-style: preserve-3d;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media-back {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sk-gallery-space-backface);
  transform: rotateY(180deg) translateZ(0.1px);
  backface-visibility: hidden;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translateZ(0.1px);
  backface-visibility: hidden;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="color"]
  .sk-gallery-space-media
  .sk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}

/* Backface modes need a framed face — beat default media-face layout. */
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media-face,
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="none"]
  .sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
}
.sk-gallery-space[data-space="on"]:not([data-distance="close"])[data-backface="backface"]
  .sk-gallery-space-media
  .sk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- aspect (section band + per-item overrides) ----
   Ratio token from the shared ASPECT TOKEN TABLE, the same contract as
   gallery-wall. Per-item `auto` inherits the section ratio. */
.sk-gallery-space[data-aspect] {
  --sk-gallery-space-aspect: var(--sk-aspect);
}
.sk-gallery-space .sk-gallery-space-media {
  aspect-ratio: var(--sk-gallery-space-aspect, 3 / 4);
}
.sk-gallery-space-media[data-aspect]:where(:not([data-aspect="auto"], [data-aspect=""])) {
  aspect-ratio: var(--sk-aspect);
}

/* ---- media ---- */
.sk-gallery-space-media {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  border-radius: var(--sk-gallery-space-media-radius);
  --sk-gallery-space-mag-x: 0;
  --sk-gallery-space-mag-y: 0;
  --sk-gallery-space-hover-scale-active: 1;
  --sk-gallery-space-hover-lift-active: 0px;
}
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-media {
  transition: transform 0.9s var(--sk-ease-out);
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-media {
  opacity: var(--sk-gallery-space-arrive);
  transform: translate3d(
      calc(var(--sk-gallery-space-mag-x, 0) * 1px),
      calc(var(--sk-gallery-space-hover-lift-active, 0px) + var(--sk-gallery-space-mag-y, 0) * 1px),
      calc((var(--sk-gallery-space-arrive) - 1) * var(--sk-gallery-space-arrive-depth))
    )
    scale(var(--sk-gallery-space-hover-scale-active, 1));
}

/* ---- arrival ---- One shot when the band first shows. ONE registered number
   per tile, 0→1, animated on the CELL; the media inherits it. Staggered by an
   index the engine writes as a 0..1 fraction, and index order IS the golden-
   angle spiral, so the sweep reads the same at 12 tiles or 80. Registered so it
   interpolates, and declared only in space posture so the flat truth never
   inherits a hidden tile. */
@property --sk-gallery-space-arrive {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@keyframes sk-gallery-space-arrive {
  to {
    --sk-gallery-space-arrive: 1;
  }
}
.sk-gallery-space[data-space="on"]:not([data-arrival="none"]) .sk-gallery-space-cell {
  --sk-gallery-space-arrive: 0;
}
.sk-gallery-space[data-space="on"][data-arrive]:not([data-arrival="none"]) .sk-gallery-space-cell {
  animation: sk-gallery-space-arrive var(--sk-gallery-space-arrive-dur) var(--sk-ease-out) forwards;
  animation-delay: calc(var(--sk-gallery-space-order, 0) * var(--sk-gallery-space-arrive-spread));
}

/* Where a tile is at arrive 0, in the CLOUD's frame. Declared ON THE CELL,
   never the band: var() substitutes where a property is DECLARED, so a pose on
   the band would read the band's absent coordinates and go invalid. */
.sk-gallery-space[data-arrival="expand"] .sk-gallery-space-cell {
  --sk-gallery-space-arrive-pose: translate3d(
    calc(
      var(--sk-gallery-space-x, 0) * (1 - var(--sk-gallery-space-arrive)) *
        var(--sk-gallery-space-arrive-from) * 1px
    ),
    calc(
      var(--sk-gallery-space-y, 0) * (1 - var(--sk-gallery-space-arrive)) *
        var(--sk-gallery-space-arrive-from) * 1px
    ),
    calc(
      var(--sk-gallery-space-z, 0) * (1 - var(--sk-gallery-space-arrive)) *
        var(--sk-gallery-space-arrive-from) * 1px
    )
  );
}
.sk-gallery-space[data-arrival="swing"] .sk-gallery-space-cell {
  --sk-gallery-space-arrive-pose: rotateY(
    calc(var(--sk-gallery-space-arrive-swing) * (1 - var(--sk-gallery-space-arrive)))
  );
}
.sk-gallery-space[data-arrival="drop"] .sk-gallery-space-cell {
  --sk-gallery-space-arrive-pose: translate3d(
    0,
    calc(var(--sk-gallery-space-arrive-drop) * (1 - var(--sk-gallery-space-arrive))),
    0
  );
}

/* The frame wears the atom's own surface fill meanwhile, so a picture arriving
   late fades into a tile that is already there instead of popping. */
.sk-gallery-space[data-space="on"] .sk-gallery-space-media-face {
  background: var(--sk-surface);
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-media .sk-art {
  transition: opacity 0.7s ease;
}
.sk-gallery-space[data-space="on"] .sk-gallery-space-media .sk-art:not([data-sk-loaded]) {
  opacity: 0;
}
.sk-gallery-space-media-back {
  display: none;
}
.sk-gallery-space-media-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Uniform crop — cover-fill inside the frame (beats the atom's height:auto). */
.sk-gallery-space-media .sk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-gallery-space[data-space="on"] .sk-gallery-space-cell {
  -webkit-user-drag: none;
  user-select: none;
}

/* Shared image voice — aspect arms above own height/object-fit. */
.sk-gallery-space-media .sk-art {
  object-position: calc(var(--sk-focal-x, 0.5) * 100%) calc(var(--sk-focal-y, 0.5) * 100%);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Hover settle on the media frame (the shared settle targets the atom; scale the
   frame instead so parallax portal shifts on .sk-art stay independent). */
.sk-gallery-space a .sk-art {
  transition: none;
}
.sk-gallery-space a:hover .sk-art,
.sk-gallery-space a:focus-visible .sk-art {
  transform: none;
}
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cell:hover .sk-gallery-space-media,
.sk-gallery-space:not([data-space="on"])
  .sk-gallery-space-cell:focus-visible
  .sk-gallery-space-media {
  transform: translateY(var(--sk-gallery-space-hover-lift))
    scale(var(--sk-gallery-space-hover-scale));
}
.sk-gallery-space:not([data-space="on"])[data-dragging]
  .sk-gallery-space-cell:hover
  .sk-gallery-space-media,
.sk-gallery-space:not([data-space="on"])[data-dragging]
  .sk-gallery-space-cell:focus-visible
  .sk-gallery-space-media {
  transform: none;
}

/* Flat grid fallback */
.sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cells {
  align-items: center;
}

/* Parallax portal — skip when color backface is live (image transform breaks
   the rear-face stack). Close always uses mirrored mode, so parallax stays on. */
.sk-gallery-space[data-space="on"]:not([data-parallax="none"]):not([data-distance="close"]):not(
    [data-backface="color"]
  )
  .sk-gallery-space-media
  .sk-art {
  will-change: transform;
  transform: translate3d(var(--sk-gallery-space-portal-shift, 0%), 0, 0)
    scale(var(--sk-gallery-space-portal-zoom, 1));
}

/* ---- breakpoint rungs (kit rungs only; no track counts) ---- */
@media (max-width: 900px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.85;
    --sk-gallery-space-perspective-factor: 1.5;
  }
}
@media (max-width: 640px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.7;
  }
}
@media (max-width: 560px) {
  .sk-gallery-space {
    --sk-gallery-space-cell: 0.6;
  }
}

/* ---- reduced-motion belt (engine also tears down live) ---- */
@media (prefers-reduced-motion: reduce) {
  .sk-gallery-space:not([data-space="on"]) .sk-gallery-space-media {
    transition: none;
  }
  .sk-gallery-space:not([data-space="on"]) .sk-gallery-space-cell:hover .sk-gallery-space-media,
  .sk-gallery-space:not([data-space="on"])
    .sk-gallery-space-cell:focus-visible
    .sk-gallery-space-media {
    transform: none;
  }
  .sk-gallery-space[data-space="on"] .sk-gallery-space-cells {
    display: grid;
  }
  .sk-gallery-space[data-space="on"] .sk-gallery-space-stage {
    display: none;
  }
}