/* =========================================
   GOLFVERSAND SPLIT BANNER
   ========================================= */

.gv-split-banner {
    position: relative;

    width: 100%;

    margin:
        clamp(56px, 7vw, 110px)
        auto;

    background: #FFFFFF;
}


/* =========================================
   ORIGINAL OPC GALERIE
   ========================================= */

.gv-split-banner__opc-source {
    display: none !important;
}


/* =========================================
   INNER
   ========================================= */

.gv-split-banner__inner {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    width: 100%;

    max-width: 1920px;

    margin:
        0
        auto;

    gap: 2px;
}


/* =========================================
   PANEL
   ========================================= */

.gv-split-banner__panel {
    position: relative;

    min-width: 0;

    height:
        clamp(
            520px,
            68vh,
            820px
        );

    overflow: hidden;

    background:
        #111111;
}


/* =========================================
   LINK
   ========================================= */

.gv-split-banner__link {
    position: absolute;

    inset: 0;

    display: block;

    color:
        #FFFFFF !important;

    text-decoration:
        none !important;
}


/* =========================================
   PICTURE
   ========================================= */

.gv-split-banner__picture {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================
   IMAGE
   ========================================= */

.gv-split-banner__image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.015);

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );
}


/* =========================================
   OVERLAY
   ========================================= */

.gv-split-banner__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 30%,
            rgba(0, 0, 0, 0.10) 55%,
            rgba(0, 0, 0, 0.58) 100%
        );

    transition:
        background
        0.4s
        ease;
}


/* =========================================
   CONTENT
   ========================================= */

.gv-split-banner__content {
    position: absolute;

    z-index: 2;

    left:
        clamp(
            28px,
            4vw,
            74px
        );

    right:
        clamp(
            28px,
            4vw,
            74px
        );

    bottom:
        clamp(
            36px,
            5vw,
            72px
        );

    color:
        #FFFFFF;
}


/* =========================================
   EYEBROW
   ========================================= */

.gv-split-banner__eyebrow {
    display: block;

    margin-bottom:
        10px;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );
}


/* =========================================
   TITLE
   ========================================= */

.gv-split-banner__content h2 {
    margin:
        0;

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            5rem
        );

    font-weight:
        600;

    line-height:
        0.95;

    letter-spacing:
        -0.04em;

    color:
        #FFFFFF;
}


/* =========================================
   BUTTON
   ========================================= */

.gv-split-banner__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    min-width:
        205px;

    margin-top:
        28px;

    padding:
        14px
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.82
        );

    border-radius:
        2px;

    background:
        rgba(
            0,
            0,
            0,
            0.06
        );

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    color:
        #FFFFFF;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        background-color
        0.25s
        ease,

        color
        0.25s
        ease;
}


/* =========================================
   ARROW
   ========================================= */

.gv-split-banner__arrow {
    font-size:
        18px;

    line-height:
        1;

    transition:
        transform
        0.25s
        ease;
}


/* =========================================
   DESKTOP HOVER
   ========================================= */

@media (hover: hover) {

    .gv-split-banner__link:hover
    .gv-split-banner__image {
        transform:
            scale(1.045);
    }


    .gv-split-banner__link:hover
    .gv-split-banner__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.03) 25%,
                rgba(0, 0, 0, 0.16) 55%,
                rgba(0, 0, 0, 0.66) 100%
            );
    }


    .gv-split-banner__link:hover
    .gv-split-banner__button {
        background:
            #FFFFFF;

        color:
            #001E50;
    }


    .gv-split-banner__link:hover
    .gv-split-banner__arrow {
        transform:
            translateX(4px);
    }

}


/* =========================================
   VERY LARGE SCREENS
   ========================================= */

@media (min-width: 1921px) {

    .gv-split-banner {
        padding:
            0
            24px;
    }


    .gv-split-banner__inner {
        border-radius:
            20px;

        overflow:
            hidden;
    }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .gv-split-banner {
        margin:
            56px
            auto;
    }


    .gv-split-banner__panel {
        height:
            clamp(
                460px,
                62vh,
                650px
            );
    }


    .gv-split-banner__content {
        left:
            28px;

        right:
            28px;

        bottom:
            36px;
    }


    .gv-split-banner__content h2 {
        font-size:
            clamp(
                2.2rem,
                6vw,
                3.7rem
            );
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .gv-split-banner {
        margin:
            48px
            0;
    }


    .gv-split-banner__inner {
        display: block;

        width: 100%;

        max-width: none;

        margin: 0;

        border-radius: 0;

        overflow: visible;
    }


    .gv-split-banner__panel {
        width: 100%;

        height:
            min(
                78vh,
                680px
            );
    }


    .gv-split-banner__panel
    +
    .gv-split-banner__panel {
        margin-top:
            2px;
    }


    .gv-split-banner__content {
        left:
            22px;

        right:
            22px;

        bottom:
            28px;
    }


    .gv-split-banner__eyebrow {
        margin-bottom:
            8px;

        font-size:
            11px;
    }


    .gv-split-banner__content h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.5rem
            );
    }


    .gv-split-banner__button {
        min-width:
            190px;

        margin-top:
            22px;

        padding:
            13px
            16px;
    }

}