:root {
  color-scheme: dark;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.slider-viewport {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / 45%) transparent;
  scrollbar-width: thin;
}

.swiper {
  width: max(100vw, 177.7778vh);
  width: max(100dvw, 177.7778dvh);
  height: max(100vh, 56.25vw);
  height: max(100dvh, 56.25dvw);
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slider-viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.slider-viewport::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgb(255 255 255 / 45%);
  background-clip: padding-box;
}