.galerija{
  --g-vu:min(1vw,calc(1.8 * max(1vh,7px)));
  --g-u:max(1vh,7px);
  --g-naslov:clamp(28px,calc(10 * var(--g-vu)),256px);
  --g-gap:clamp(28px,3vw,60px);
  --g-tamna:#120a22;
  --g-tekst:#F4F0FF;
  position:relative;z-index:20;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:max(min(100vh,62.5vw),700px);overflow-x:clip;overflow-y:visible;
  background-color:#3A1780;color:var(--g-tekst)}
@supports not (overflow:clip){.galerija{overflow:hidden}}
@supports (height:100svh){.galerija{min-height:max(min(100svh,62.5vw),700px)}}

.gal-pozadina,.gal-noc,.gal-tekstura{position:absolute;inset:0;pointer-events:none}
.gal-pozadina{z-index:-3;background:radial-gradient(62% 50% at 50% 64%,rgba(132,70,246,.4) 0%,rgba(132,70,246,0) 72%)}
.gal-noc{z-index:-2;overflow:hidden;clip-path:inset(0);background:var(--g-tamna);opacity:0;transition:opacity .8s var(--e-editorial)}
.galerija.tamno .gal-noc{opacity:1}

.gal-noc span{position:fixed;top:0;bottom:0;left:0;right:0;display:block;pointer-events:none}
.gal-noc .gal-noc__koza{background-color:var(--g-tamna);
  background-image:url("../../media/podnozje-koza.webp"),radial-gradient(64% 58% at 50% 40%,#2c1754 0%,#1b0f35 48%,#110920 78%,#0d0619 100%);
  background-size:512px 512px,100% 100%;background-blend-mode:overlay,normal}
.gal-noc .gal-noc__svjetlo{left:-7vw;right:-7vw;will-change:transform;opacity:.9;mix-blend-mode:soft-light;
  background:
    radial-gradient(38% 50% at 50% 30%,rgba(214,196,255,.95) 0%,rgba(150,104,248,.5) 42%,rgba(124,58,237,0) 72%),
    radial-gradient(34% 44% at 16% 88%,rgba(124,58,237,.55) 0%,rgba(124,58,237,0) 70%),
    radial-gradient(30% 40% at 86% 70%,rgba(167,139,250,.4) 0%,rgba(167,139,250,0) 70%)}
.gal-tekstura{z-index:-1;overflow:hidden;clip-path:inset(0);transition:opacity .8s var(--e-editorial)}
.galerija.tamno .gal-tekstura{opacity:0}
.gal-tekstura span{position:fixed;inset:0;display:block;
  background-image:radial-gradient(circle at 50% 50%,rgba(222,210,255,.12) 0,rgba(222,210,255,.12) .85px,rgba(222,210,255,0) 1.35px);
  background-size:6px 6px}

.gal-glava{position:relative;z-index:2;display:flex;justify-content:center;
  padding:min(calc(12 * var(--g-u)),calc(7.5 * var(--g-vu))) 48px 0;pointer-events:none}
.gal-naslov{margin:0;font-family:"Saira XC",sans-serif;font-weight:900;font-size:var(--g-naslov);line-height:.9;letter-spacing:-.005em;
  text-transform:uppercase;text-align:center;color:var(--g-tekst);user-select:none;-webkit-user-select:none;
  transition:color .8s var(--e-editorial)}
.gal-red{display:block;white-space:nowrap}
.galerija.tamno .gal-naslov{color:#E6DCFF}

.gal-sina{position:relative;z-index:10;width:100%;margin-top:calc(var(--g-naslov) * -.27);
  padding-bottom:min(calc(8 * var(--g-u)),calc(5 * var(--g-vu)));
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-sina::-webkit-scrollbar{display:none}
.gal-ziva .gal-sina{overflow:visible}
.gal-traka{display:flex;width:max-content;user-select:none;-webkit-user-select:none}
.gal-ziva .gal-traka{will-change:transform;touch-action:pan-y;cursor:grab}
.gal-ziva .gal-traka.vuce{cursor:grabbing}
.gal-grupa{display:flex;flex:none;align-items:center;gap:var(--g-gap);padding:56px var(--g-gap) 64px 0}
.gal-sina .gal-grupa:first-child{padding-left:var(--g-gap)}
.gal-ziva .gal-sina .gal-grupa:first-child{padding-left:0}
.gal-ziva .gal-grupa{padding-block:0}
.gal-karta{flex:none}

.gal-okvir{--gh:44;--gy:6px;--gr:-3deg;
  --g-h:clamp(180px,min(calc(var(--gh) * var(--g-u)),calc(var(--gh) * .625vw)),calc(var(--gh) * 14px));
  position:relative;margin:0;height:var(--g-h);width:calc(var(--g-h) * .75);padding:8px;background:#F3EEF9;
  box-shadow:0 34px 90px -28px rgba(6,2,18,.78),0 2px 6px rgba(6,2,18,.22);
  transform:translateY(var(--gy)) rotate(var(--gr)) scale(1);transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.gal-karta:nth-child(8n+1) .gal-okvir{--gh:44;--gy:6px;--gr:-3deg}
.gal-karta:nth-child(8n+2) .gal-okvir{--gh:54;--gy:-4px;--gr:2deg}
.gal-karta:nth-child(8n+3) .gal-okvir{--gh:48;--gy:7px;--gr:-2deg}
.gal-karta:nth-child(8n+4) .gal-okvir{--gh:56;--gy:1px;--gr:3deg}
.gal-karta:nth-child(8n+5) .gal-okvir{--gh:46;--gy:8px;--gr:-3deg}
.gal-karta:nth-child(8n+6) .gal-okvir{--gh:48;--gy:3px;--gr:2deg}
.gal-karta:nth-child(8n+7) .gal-okvir{--gh:42;--gy:-5px;--gr:-2deg}
.gal-karta:nth-child(8n+8) .gal-okvir{--gh:50;--gy:6px;--gr:3deg}
.gal-slika{position:relative;width:100%;height:100%;overflow:hidden;background:#2A1458}

.gal-slika img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;pointer-events:none}

.gal-natpis{position:absolute;left:8px;right:8px;bottom:8px;height:52%;display:flex;align-items:flex-end;
  padding:clamp(8px,7%,16px);pointer-events:none;opacity:0;transition:opacity 450ms var(--e-ui);
  background:linear-gradient(to top,rgba(8,4,18,.82) 0%,rgba(8,4,18,.4) 45%,rgba(8,4,18,0) 100%);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 46%,transparent 80%);mask-image:linear-gradient(to right,#000 0%,#000 46%,transparent 80%)}
.gal-natpis span{max-width:64%;font:500 15px/1.35 "Satoshi",sans-serif;color:#F7F3FF}
@media (hover:hover){
  .gal-okvir:hover{transform:translateY(var(--gy)) rotate(0deg) scale(1.045)}
  .gal-okvir:hover .gal-natpis{opacity:1}
}
@media (hover:none){.gal-natpis{opacity:1}}

@media (max-width:899px){
  .galerija{
    --g-pu:min(1vw,calc(.5 * max(1vh,6.4px)));
    --g-naslov:calc(15.5 * var(--g-pu));
    --g-gap:22px;
    min-height:0;padding:32px 0}
  .gal-glava{padding:0 16px}
  .gal-red{white-space:normal}
  .gal-red > span{display:block;white-space:nowrap}
  .gal-okvir{--g-w:calc((62 + (var(--gh) - 42) * 6 / 14) * var(--g-pu));width:var(--g-w);height:calc(var(--g-w) * 4 / 3);padding:4px}
  .gal-natpis{left:4px;right:4px;bottom:4px}
  .gal-natpis span{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .gal-okvir,.gal-natpis,.gal-noc,.gal-naslov{transition:none}
}
