html, body {
      margin:0;
      padding:0;
      background:#000;
    }

    section {
      width: 100vw;
      min-height:100vh;
      display: flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .carousel {
      width: 100vw;
      height: 100vh;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      display: flex;
      -webkit-overflow-scrolling: touch;
    }

    .carousel-slide {
      position:relative;
      flex: 0 0 100%;
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items: center;
      color: white;
      scroll-snap-align: center;
    }

    .carousel-img-wrapper {
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
      overflow:hidden;
    }

    .carousel-slide img {
      width:150%;
      height:100%;
      object-fit:cover;
    }

    .carousel-nav {
      display:none; /* displayed in the JS */
      position:absolute;
      width:100%;
    }

    .carousel-nav button {
      border:none;
      font-size:3rem;
      position:absolute;
      top:50%;
      aspect-ratio:1.5;
      width:7vw;
      max-width:75px;
      height:auto;
      background-color: transparent;
      background-size: cover;
      overflow:visible;
      background-image: url( "data:image/svg+xml,%3Csvg stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M2,11 11,2 20,11'/%3E%3C/svg%3E" );
    }

    .prev {
      transform:translateY(-50%) rotate(-90deg);
    }

    .next {
      transform:translateY(-50%) rotate(90deg);
      right:0;
    }

    .carousel-progress {
      display: none; /* displayed in the JS */
      position: absolute;
      width: 33%;
      max-width: 300px;
      max-height: 8px;
      bottom: 3.5vh;
      pointer-events: none;
      opacity: 0.36;
    }

     /* Simplify the scroll bar appearance */
    ::-webkit-scrollbar {
      height: 13px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      border-top:6px solid #000;
      background: #555;
      width:50%;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #bbb;
    }


    @media (max-width: 500px) {

      .carousel-nav button {
        display:none;
      }
    }