.scroll-gallery{
  position:relative;
  width:100%;
  margin:1rem auto;
  overflow:hidden;
  background:var(--section-bg, #f9fafb);
  padding-inline:var(--content-inset);
}

.scroll-gallery::before,
.scroll-gallery::after{
  content:"";
  position:absolute;
  inset-block:0;
  width:40px;
  pointer-events:none;
  z-index:5;
}

.scroll-gallery::before{
  left:0;
  background:linear-gradient(
    to right,
    var(--section-bg, #f9fafb) 60%,
    color-mix(in srgb, var(--section-bg, #f9fafb) 0%, transparent)
  );
}

.scroll-gallery::after{
  right:0;
  background:linear-gradient(
    to left,
    var(--section-bg, #f9fafb) 60%,
    color-mix(in srgb, var(--section-bg, #f9fafb) 0%, transparent)
  );
}

.scroll-gallery .sg-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:12px;
  will-change:transform;
}

.scroll-gallery .sg-item{
  flex:0 0 40%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  overflow:hidden;
  background:#020617;
  box-shadow:0 16px 40px rgba(15,23,42,.35);
  position:relative;
}

.scroll-gallery .sg-item img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .35s ease-out, filter .35s ease-out;
}

.scroll-gallery .sg-item:hover img{
  transform:scale(1.03);
  filter:brightness(1.02);
}

.scroll-gallery .sg-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:70px;
  border:none;
  border-radius:4px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:6;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}

.scroll-gallery .sg-nav-prev{ left:8px; }
.scroll-gallery .sg-nav-next{ right:8px; }

@media (hover:hover){
  .scroll-gallery .sg-nav:hover{
    background:rgba(0,0,0,.55);
    transform:translateY(-50%) scale(1.02);
  }
}

.scroll-gallery:not(.scroll-gallery--slider) .sg-nav{
  display:none;
}

.scroll-gallery .sg-dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
  z-index:7;
}

.scroll-gallery .sg-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.scroll-gallery .sg-dot.is-active{
  background:rgba(0,0,0,.6);
  transform:scale(1.1);
}

@media (min-width:1400px){
  .scroll-gallery .sg-item{ flex-basis:45%; }
}

@media (max-width:1024px){
  .scroll-gallery .sg-item{ flex-basis:60%; }
}

@media (max-width:768px){
  .scroll-gallery::before,
  .scroll-gallery::after{
    width:28px;
  }

  .scroll-gallery .sg-item{
    flex-basis:90%;
    border-radius:14px;
  }

  .scroll-gallery .sg-nav{
    width:32px;
    height:56px;
    font-size:18px;
    background:rgba(0,0,0,.3);
  }

  .scroll-gallery .sg-dot{
    width:7px;
    height:7px;
  }
}