/* ----------------------------reverse scroll images-------------------------------------------------------------- */
        /* --------------------------------------------------------------------------------------------------------------- */
        /* --------------------------------------------------------------------------------------------------------------- */
        .column-reverse-container {
            background: aliceblue;
            padding: 2em 2em;
            overflow-y: scroll;
            height: 80vh;
            width: 100%;

            border: 4px solid aliceblue;
            outline: 1px solid black;
            border-radius: 9px;
        }

        /* Three column layout */
        .columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            width: 100%;
            max-width: 80em;
            margin: 0 auto;
            position: relative;
            gap: 1rem;
        }

        /* Inside one column, lay out all items in column direction */
        .column {
            --column-offset: 10vh;
            display: flex;
            flex-direction: column;
            padding: var(--column-offset) 0;
        }


        /* Limit site of the images */
        .column__item-imgwrap img {
            border-radius: 1em;
            margin-bottom: 1rem;
            width: 100%;
            height: auto;
            aspect-ratio: 0.75;
            object-fit: cover;
        }


        /* @supports (animation-timeline: scroll()) { */

        /* As we're about to shift content out of .columns, we need it to hide its overflow */
        .columns {
            overflow-y: clip;
        }

        .column-reverse {
            /* Flip item order in reverse columns */
            flex-direction: column-reverse;
        }

        /* Set up Animation */
        @keyframes adjust-position {

            /* Start position: shift entire column up, but not so that it goes out of view */
            from {
                transform: translateY(calc(-100% + 75vh));
            }

            /* End position: shift entire column down, but not so that it goes out of view */
            to {
                transform: translateY(calc(100% - 75vh));
            }
        }

        /* Hook our animation with the timel,ine to our columns */
        .column-reverse {
            animation: adjust-position linear forwards;
            animation-timeline: scroll(nearest);
        }