:root{
  --gal-gap: 18px; --gal-radius: 16px; --gal-shadow: 0 10px 30px rgba(0,0,0,.25);
  --gal-hover-scale: 1.03; --gal-bg:#0c1117; --gal-text:#e7f3ff;
}
.gal-wrap{position:relative;width:100%;container-type:inline-size;}
.gal-wrap::before{content:"";display:block;padding-top:var(--stageH,72%);}
.gal-stage{position:absolute;inset:0;overflow:visible;}
.gal-card{position:absolute; z-index:1; left:var(--x); top:var(--y); width:var(--w); transform-origin:center; transition:transform .28s ease, box-shadow .28s ease, z-index .1s linear; will-change:transform;}
.gal-card.is-top{ z-index:9; transform:scale(var(--gal-hover-scale)); }
.gal-box{ position:relative; width:100%; aspect-ratio: var(--ratio, 1/1); border-radius:var(--gal-radius); overflow:hidden; box-shadow:var(--gal-shadow); background: radial-gradient(120% 120% at 50% 20%,rgba(255,255,255,.05),rgba(0,0,0,.18)), var(--gal-bg); }
.gal-label{ position:absolute; left:10px; top:10px; z-index:2; padding:6px 10px; font:600 12px/1.1 system-ui; color:var(--gal-text); letter-spacing:.06em; text-transform:uppercase; background:rgba(10,17,24,.55); backdrop-filter: blur(6px); border-radius:10px; }
.gal-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; opacity:0; transition:opacity .5s ease; background:transparent; }
.gal-media.g-active{ opacity:1; }
.gal-card--interior{ --x:6%;  --y:3%;  --w:44%; }
.gal-card--exterior{ --x:30%; --y:38%; --w:48%; }
.gal-card--works{    --x:60%; --y:9%;  --w:34%; }


@media (max-width: 820px){
  /* Только высота сцены под экран. Вся композиция и наложения — как на ПК. */
  .gal-wrap::before{ padding-top: var(--stageH-mobile, var(--stageH,72%)); }
  .gal-label{ font-size:12px; }
}


/* Hide labels on gallery cards (custom build) */
.gal-label{display:none !important;}