.case-gallery{max-width:100%;overflow:hidden}
.case-detail__main{min-width:0}

.case-gallery__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.case-gallery__controls{
  display:flex;
  gap:.5rem;
}

.case-gallery__btn{
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  border:1px solid rgba(175,179,176,.35);
  background:rgba(255,255,255,.8);
  color:rgba(47,51,49,.9);
  cursor:pointer;
  line-height:1;
  font-size:1.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.case-gallery__btn:hover{background:#fff}
.case-gallery__btn:active{transform:translateY(1px)}
.case-gallery__btn:focus-visible{outline:2px solid rgba(95,94,94,.35);outline-offset:3px}

.case-gallery__track{
  margin-top:1rem;
  display:flex;
  gap:1rem;
  overflow-x:auto;
  max-width:100%;
  padding-inline:.25rem;
  scroll-padding-left:.25rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.case-gallery__track::-webkit-scrollbar{width:0;height:0}
.case-gallery__track::-webkit-scrollbar-thumb{background:transparent}

.case-gallery__item{
  flex:0 0 auto;
  width:clamp(16rem,52vw,40rem);
  max-width:100%;
  aspect-ratio:16/10;
  scroll-snap-align:start;
  border-radius:.5rem;
  overflow:hidden;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(175,179,176,.16);
}

.case-gallery__open{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  width:100%;
  height:100%;
  cursor:zoom-in;
}
.case-gallery__open:focus-visible{outline:2px solid rgba(95,94,94,.35);outline-offset:3px}

.case-gallery__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

@media (max-width:61.25rem){
  .case-gallery__btn{width:2.4rem;height:2.4rem;font-size:1.35rem}
  .case-gallery__item{width:85vw}
}

.case-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(20,20,20,.72);
  display:none;
  justify-content:center;
  align-items:center;
  align-items:center;
  padding:1.25rem;
}
.case-lightbox:not([hidden]){display:flex}
.case-lightbox[hidden]{display:none !important}

.case-lightbox__figure{
  margin:0;
  max-width:min(1100px, 100%);
  width:min(1100px, 100%);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:.75rem;
  overflow:hidden;
}

.case-lightbox__img{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(100vh - 6rem);
  object-fit:contain;
  background:#0f0f0f;
}

.case-lightbox__close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:2.75rem;
  height:2.75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.case-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:3rem;
  height:3rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  font-size:2rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.case-lightbox__nav--prev{left:1rem}
.case-lightbox__nav--next{right:1rem}

.case-lightbox__close:hover,
.case-lightbox__nav:hover{background:rgba(0,0,0,.4)}
.case-lightbox__close:focus-visible,
.case-lightbox__nav:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}

@media (max-width:61.25rem){
  .case-lightbox{padding:1rem}
  .case-lightbox__nav{width:2.75rem;height:2.75rem}
  .case-lightbox__nav--prev{left:.75rem}
  .case-lightbox__nav--next{right:.75rem}
  .case-lightbox__figure{width:100%}
}