.real-gallery{
  position:relative;
  min-width:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#101317;
  box-shadow:18px 18px 0 #dceefb;
  isolation:isolate;
  touch-action:pan-y;
}
.gallery-stage,.gallery-slide{position:absolute;inset:0}
.gallery-slide{
  opacity:0;
  transform:scale(1.018);
  pointer-events:none;
  transition:opacity .72s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.gallery-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto;z-index:1}
.gallery-slide img{width:100%;height:100%;object-fit:cover}
.gallery-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 56%,rgba(9,13,17,.48));
}
.gallery-ui{
  position:absolute;
  z-index:3;
  left:18px;
  right:18px;
  bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#fff;
}
.gallery-arrows{display:flex;gap:8px}
.gallery-arrow{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.52);
  border-radius:50%;
  background:rgba(16,19,23,.54);
  color:#fff;
  font-family:var(--display,'Rajdhani',sans-serif);
  font-size:23px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
}
.gallery-arrow:hover{background:#1b88df;border-color:#1b88df;transform:translateY(-1px)}
.gallery-meta{display:flex;align-items:center;gap:13px}
.gallery-dots{display:flex;align-items:center;gap:7px}
.gallery-dot{
  width:22px;
  height:3px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:width .25s,background .25s;
}
.gallery-dot.is-active{width:36px;background:#1b88df}
.gallery-counter{
  min-width:44px;
  font-family:var(--display,'Rajdhani',sans-serif);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-align:right;
}
.real-gallery:focus-visible{outline:2px solid #1b88df;outline-offset:4px}
@media(max-width:680px){
  .real-gallery{aspect-ratio:4/3;box-shadow:9px 9px 0 #dceefb}
  .gallery-ui{left:12px;right:12px;bottom:11px}
  .gallery-arrow{width:40px;height:40px}
  .gallery-dot{width:16px}.gallery-dot.is-active{width:28px}
  .gallery-counter{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .gallery-slide,.gallery-arrow,.gallery-dot{transition:none}
}