carousel.css

html, body {
    margin: 0;
    height: 100vh;  /* enable scrolling away the URL bar on mobile */
    background: black;
}

:root {
  /* Configuration */
  --img-width: 50vw;
  --img-height: calc(var(--img-width) * 3/4);
  --img-padding: 5vw;
}

#scroller {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    display: flex;
    align-items: center;
}

img {
    flex: 1;
    width: var(--img-width); 
    height: var(--img-height);
    padding: 0 var(--img-padding);
    scroll-snap-align: center;
}

img:first-child {
    padding-left: calc( (100vw - var(--img-width)) / 2);
}

img:last-child {
    padding-right: calc( (100vw - var(--img-width)) / 2);
}

#features {
    position: fixed;
    bottom: 10px;
    width: 100vw;
    font-size: small;
    padding-left: 10px;
    color: #303030;
}

@supports not (scroll-snap-type: x mandatory) {
    #feature-snap {
        color: red;
        text-decoration: line-through;
    }
}