:root {
  --x-splide-ratio: calc(727 / 2000); /* IMPORTANT */
}
html::-webkit-scrollbar {
  display: none;
}
html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html {
  background: black;
}
body {
  background: transparent;
  color: white;
}
.splide__slide img {
  width: 100%; /* IMPORTANT */
  height: auto;
}
.splide__arrow {
  background: black;
}
.splide__arrow svg {
  fill: white;
}
.splide {
  /* splide needs an explicit height so page loading is not affected.
   * all images used are 2000 x 727 so the height is always 0.3635.
   * this applied to the viewport width (which is the width of the image at
   * all times) gives the dynamic height of the image which is used to give
   * the page a size before the content is even loaded.
   */
  height: calc(100vw * var(--x-splide-ratio)) !important;
}