html, body { margin: 0; height: 100%; background: #F4F5F7; overflow: hidden; }
.strip {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  outline: none;
}
.strip::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 auto; height: 100%; aspect-ratio: 1080 / 1350;
  display: block; object-fit: cover; scroll-snap-align: start;
  background: #F4F5F7;
}
.nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 0;
  background: #0E0F12; color: #fff; font: 500 18px/1 system-ui, sans-serif;
  cursor: pointer; opacity: .85;
}
.nav:hover { opacity: 1; }
.nav:disabled { opacity: 0; pointer-events: none; }
.prev { left: 12px; }
.next { right: 12px; }