.globaldigital-herobanner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top: solid 3px var(--bs-primary);

    & .image {
        margin-bottom: 1rem;
        object-fit: cover;
        object-position: center;

        &.secondary {
            display: none;
        }
    }

    & .content {
        position: relative;
        z-index: 1;

        & br {
            display: none;
        }

    }

    & .title {
            color: var(--bs-primary);
    }

    & .description {
        
    }

}

@media (min-width: 992px) {

    .globaldigital-herobanner {
        display: flex;
    
        & .image {
            /* filter: blur(1px) brightness(0.9); */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            object-position: left;

            &.secondary {
                display: block;
                left: 0%;
                width: 65%;
                object-position: right;
            }
    
            &.primary {
                left: 35%;
                width: 65%;
            }
        }
    
        & .content {
            width: 100%;
            color: var(--white);
            
            & br {
                display: inline;
            }

            & .container {
                position: inherit;
                width: 0;
                left: 35%;
                margin: 0;
                display: flex;
                justify-content: center;
                padding: 0;
            }

            /* & .row {
                height: 30dvw;              
            } */

            & .col {
                position: relative;
                /* padding: 10dvw 7dvw 5dvw 7dvw; */
                padding-top: clamp(100px, 12dvw, 160px); 
                padding-right: clamp(70px, 7dvw, 112px); 
                padding-bottom: clamp(50px, 5dvw, 80px); 
                padding-left: clamp(70px, 7dvw, 112px);
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* width: 30dvw; */
                /* width: clamp(40rem, 35dvw, 60rem); */
                aspect-ratio: 0.99 / 1;
                white-space: nowrap;

                &.col::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: -1;
                transform: translate(-50%, -50%);
                width: 110%;
                height: 100%;
                background-image: url(/wp-content/uploads/2024/08/Startseite_Grafik_Hopfendolde.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100%;
                }
            }
        }

        & .title {
            margin-bottom: 0.8dvw;
            margin-bottom: clamp(10px, 0.8dvw ,20px);
            font-size: 0.8dvw;
            font-size: clamp(10px, 0.8dvw ,12.8px);
            color: var(--white);
        }

        & .description {
            margin-top: 0.8dvw;
            margin-bottom: 0.8dvw;
            margin-top: clamp(10px, 0.8dvw ,20px);
            margin-bottom: clamp(10px, 0.8dvw ,20px);
            font-size: 2dvw;
            font-size: clamp(20px, 2dvw ,32px);
            color: var(--white);
        }

        & .subtext {
            margin-top: 0.8dvw;
            margin-bottom: clamp(10px, 0.8dvw ,20px);
            margin-bottom: 0.8dvw;
            margin-bottom: clamp(10px, 0.8dvw ,20px);
            font-size: 0.8dvw;
            font-size: clamp(14px, 0.8dvw ,16px);
            color: var(--white);
        }

        & .btn, .custom-btn {
            margin-bottom: 0.8dvw;
            /* margin-bottom: clamp(0.5rem, 0.8dvw ,1rem); */
            font-size: 0.8dvw;
            font-size: clamp(10px, 0.8dvw ,12.8px);
            color: var(--white);
        }
    
    }

}