/*
 * Put .scroll-column on the content of a grid column. It scrolls its own content and never reaches
 * below the viewport: scroll_column.js sets --scroll-column-top to its distance from the viewport
 * top. Once the page has scrolled it up, it sticks to the top of the viewport. Its parent column
 * has to be as tall as the row, which a Bootstrap .row gives by default. Below md the page scrolls
 * as usual.
 */
@media (min-width: 768px) {
    .scroll-column {
        position: sticky;
        top: 0;
        max-height: calc(100dvh - var(--scroll-column-top, 0px));
        overflow-y: auto;
        padding-bottom: 3rem;
        scrollbar-width: none;
        overscroll-behavior: contain;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}