.scroll-with-control {
    display: flex;
    width: 100%;
    align-content: flex-start;
}

.scroll-with-control-scroll-area {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
} 

.scroll-with-control .scroll-with-control-scroll-area > div {
    flex: 0 0 auto;
    max-width: 100vw;
    margin-right: 2rem;
}

.scroll-with-control .scroll-with-control-scroll-area::-webkit-scrollbar {
    display: none;
}

button.scroll-with-control-button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 2rem;
    width: 3rem;
    padding: 0;
}

@media (min-width: 48rem) {
    button.scroll-with-control-button-left {
        margin-left: -3rem;
    }
}

button.scroll-with-control-button-left i {
    padding-right: 1rem;
}

button.scroll-with-control-button-right i {
    padding-left: 1rem;
}

button.scroll-with-control-button .spacer {
    display: inline-block;
    width: 1rem;
}

button.scroll-with-control-button:hover {
    background-color: transparent;
}

button.scroll-with-control-button:focus {
    background-color: transparent;
}