/* ----------------------------------------------------------------- */
/* -------------- START Custom Gallery and Buttons V3 -------------- */
/* ----------------------------------------------------------------- */
#cms-gallery #g4 {
    --image-height: 66vw;
}

@media screen and (min-width: 1280px) {
    #home:has(#cms-gallery):has(#buttons-b3) {
        --rail-width: 25vw;
        --rail-inset: 36px;
        --rail-icon-size: 40px;
        --rail-bar-width: calc(var(--rail-inset) * 2 + var(--rail-icon-size));
        --hero-min-height: 40vw;

        display: grid;
        grid-template-columns: 1fr;

        > * {
            grid-column: 1;
        }

        > #cms-gallery,
        > .main:has(#buttons-b3) {
            grid-row: 1;
        }

        > .main:has(#buttons-b3) {
            width: var(--rail-width);
            justify-self: start;
            z-index: 1;
        }
    }

    #home:has(#buttons-b3) #cms-gallery:has(#g4) {
        display: flex;
        flex-direction: column;

        #g4 {
            display: flex;
            flex: 1;
            flex-direction: column;
            height: auto;

            .slide {
                flex: 1;
                align-items: stretch;
            }

            .text {
                width: var(--rail-width);
                flex: none;
                margin: 0;
                visibility: hidden;
            }

            .image-and-nav {
                width: auto;
                flex: 1;
                height: auto;
                min-height: var(--hero-min-height);
                padding: 0;
                position: relative;

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0 auto 0 0;
                    width: 30%;
                    background: linear-gradient(90deg, rgb(255 255 255) 7%, transparent);
                    pointer-events: none;
                    z-index: 2;
                }
            }

            .responsive-image,
            .responsive-image img {
                height: 100%;
            }
        }
    }

    #home #view-container:has(> .homepage-component > div > #buttons-b3) {
        position: static;
        width: 100%;
    }

    #home #buttons-b3 .wrapper {
        display: flex;
        flex-direction: column;
        min-height: var(--hero-min-height);
        position: relative;
        gap: 32px;
        padding: 32px 0;

        &::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: var(--rail-bar-width);
            background-color: var(--button-bg-color);
            z-index: 0;
            user-select: none;
        }

        .button {
            display: flex;
            flex: 1 1 auto;
            height: auto;
            width: 100%;
            background-color: var(--icon-and-text-color);
            border: none;
            outline: none;
            transition: all 0.7s ease-in-out;

            &:hover {
                background: unset;
                filter: unset;

                .icon-wrapper {
                    transform: scale(1.1);
                }

                .button-title {
                    text-decoration: underline;
                    text-decoration-thickness: 2px;
                    text-underline-offset: 2px;
                }
            }
        }

        .button-link {
            display: flex;
            flex: 1;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 48px;
            padding: 0 16px 0 var(--rail-inset);
            color: var(--button-bg-color);
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
            }

            .icon-wrapper {
                position: relative;
                z-index: 1;
                flex: none;
                width: var(--rail-icon-size);
                margin-bottom: 0;
                background-color: var(--button-bg-color);
            }

            .button-title {
                min-width: 0;
                color: var(--button-bg-color);
                font-size: clamp(1.0625rem, -0.1875rem + 1.5625vw, 1.375rem);
                font-weight: 400;
                font-family: "Questrial", sans-serif !important;
                line-height: normal;
                text-transform: uppercase;
                text-align: left;
                text-decoration: none;
            }
        }
    }
}
/* ----------------------------------------------------------------- */
/* --------------- END Custom Gallery and Buttons V3 --------------- */
/* ----------------------------------------------------------------- */