.mgallery{
  --width: min(820px, 92vw);
  --gap: 14px;
  --scale-side: .76;
  --scale-center: 1.03;
  --elev: 10px;
  --shadow: 0 10px 28px rgba(0,0,0,.22);
  --radius: 12px;
  --dot: 6px;
  --dot-active: 18px;
  margin: 44px auto;
  padding: 12px 0 20px;
  display: grid; place-items: center;
}
.mgallery__inner{ width: var(--width); position: relative; }

.mgallery__track{
  position: relative;
  height: clamp(160px, 28vw, 300px);
  list-style: none; margin: 0; padding: 0;
  display: grid; place-items: center;
  overflow: visible;
}
.mgallery__slide{
  position: absolute; inset: 0; display: grid; place-items: center;
  transform-origin: center center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s, filter .45s;
  opacity: 0; pointer-events: none;
}
.mgallery__img{
  width: clamp(320px, 60%, 520px);
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(calc(var(--elev) * -1));
  pointer-events: auto;
}

.mgallery__slide.is-prev{
  transform: translateX(calc(-50% - var(--gap))) scale(var(--scale-side));
  opacity: .9; z-index: 3; pointer-events: auto; cursor: pointer;
}
.mgallery__slide.is-next{
  transform: translateX(calc(50% + var(--gap))) scale(var(--scale-side));
  opacity: .9; z-index: 3; pointer-events: auto; cursor: pointer;
}
.mgallery__slide.is-active{
  transform: translateX(0) scale(var(--scale-center));
  opacity: 1; z-index: 4; pointer-events: none;
}
.mgallery__slide.is-active .mgallery__img{
  cursor: zoom-in;
  pointer-events: auto;
}

.mgallery__btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.85);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  cursor: pointer; z-index: 6;
}
.mgallery__btn--prev{ left: -22px; }
.mgallery__btn--next{ right: -22px; }
.mgallery__btn::before{
  content: ''; display: block; width: 10px; height: 10px; margin: auto;
  border: solid #111; border-width: 0 2px 2px 0; padding: 4px;
}
.mgallery__btn--prev::before{ transform: rotate(135deg); }
.mgallery__btn--next::before{ transform: rotate(-45deg); }

.mgallery__dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.mgallery__dot{
  width: var(--dot); height: var(--dot); border-radius: 999px; border: 0;
  background: #c9d3dc; cursor: pointer; transition: width .25s, background .25s;
}
.mgallery__dot.is-active{ width: var(--dot-active); background: #567; }

.mgallery__overlay[hidden]{ display:none; }
.mgallery__overlay{ position:fixed; inset:0; z-index:1000; }
.mgallery__overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(6,10,16,.55);
  backdrop-filter: blur(8px);
}
.mgallery__overlay-panel{
  position:absolute; inset:6% 8%;
  background: rgba(12,16,22,.85);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; overflow:hidden;
  display:grid; grid-template-rows: auto 1fr;
}
.mgallery__overlay-close{
  justify-self:end; margin:10px; padding:6px 10px;
  border:0; border-radius:8px; background:#fff; color:#111;
  font-size:22px; line-height:1; cursor:pointer; z-index:1;
}

.mgallery__zoom{
  position:absolute; inset:0; display:grid; place-items:center;
  padding: 24px;
}
.mgallery__zoom-img{
  max-width: 92vw; max-height: 86vh; border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  object-fit: contain;
  cursor: zoom-out;
}

.u-visuallyhidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

@media (max-width: 760px){
  .mgallery__img{ width: 78%; }
  .mgallery__slide.is-prev, .mgallery__slide.is-next{ opacity: .8; }
  .mgallery__overlay-panel{ inset: 5% 4%; }
  .mgallery__btn{ width:34px; height:34px; }
  .mgallery__btn--prev{ left: -14px; }
  .mgallery__btn--next{ right: -14px; }
}
.mgallery__overlay { position: fixed; inset: 0; z-index: 1000; }
.mgallery__overlay-panel{
  inset: 0 !important;            border-radius: 0;                border: 0;
  background: rgba(12,16,22,.85);
}
.mgallery__zoom{ padding: min(6vh, 24px); }     .mgallery__zoom-img{
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
}

.mgallery--plus{
  --width: min(940px, 94vw);     --gap: 16px;                   --scale-side: .80;             --scale-center: 1.04;          --elev: 12px;                  --radius: 14px;                --dot: 7px;                    --dot-active: 20px;            margin: 52px auto;           }

.mgallery--plus .mgallery__track{
  height: clamp(190px, 32vw, 360px); }

.mgallery--plus .mgallery__img{
  width: clamp(380px, 64%, 640px);     }

.mgallery--plus .mgallery__btn{ width: 40px; height: 40px; }
.mgallery--plus .mgallery__btn--prev{ left: -26px; }   .mgallery--plus .mgallery__btn--next{ right: -26px; }
.mgallery--plus .mgallery__btn::before{ width: 11px; height: 11px; padding: 4px; }

.mgallery--plus .mgallery__dots{ gap: 7px; margin-top: 14px; }
.mgallery--plus .mgallery__dot{ width: var(--dot); height: var(--dot); }
.mgallery--plus .mgallery__dot.is-active{ width: var(--dot-active); }

@media (max-width: 760px){
  .mgallery--plus .mgallery__track{ height: clamp(170px, 48vw, 320px); }
  .mgallery--plus .mgallery__img{ width: 84%; }        .mgallery--plus .mgallery__btn{ width: 36px; height: 36px; }
  .mgallery--plus .mgallery__btn--prev{ left: -18px; }
  .mgallery--plus .mgallery__btn--next{ right: -18px; }
}

.mgallery__img{
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),              0 0 0 6px rgba(0,0,0,.20);            }