.hero-container {
    background-image: url('/imgs/assets/artists/noize/noize_piercing_bw.webp');
    height: 90vh;

    .gradient {
        width: 100%;
        background: rgba(0,0,0,.4);
        background: linear-gradient(0deg,rgba(0, 0, 0, .9) 35%, rgba(222, 227, 231, 0) 75%);
    }
}

@media(min-width: 992px) {
    .hero-container {
        background-image: url('/imgs/assets/artists/noize/noize_piercing_crop_bw.webp');
        height: 90vh;

        .gradient {
            /* width: 50%; */
            background: #000000;
            background: linear-gradient(100deg,rgba(0, 0, 0, .94) 43%, rgba(222, 227, 231, 0) 60%);
        }
    }
}

.cta {
    min-height: 60vh;

    .gradient-mobile { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-2); 
        background: linear-gradient(180deg,rgba(13, 13, 13, 1) 20%, rgba(222, 227, 231, 0) 70%);
    }

    .gradient-desktop {
        display: none;
    }
}

#cta-1 {
    background-image: url('/imgs/assets/studio/display_case_1.webp');
}

#cta-2 {
    background-image: url('/imgs/assets/studio/display_case_1.webp');
}

@media(min-width: 992px) {
    .cta {
        min-height: fit-content;

        .container .row {
            min-height: 15vh;
        }

        .gradient-mobile {
            display: none;
        }
    
        .gradient-desktop {
            display: flex;
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;

            .gradient {
                background: #080808; 
                background: linear-gradient(97deg,rgba(13, 13, 13, 1) 5%, rgba(222, 227, 231, 0) 100%);
            }
        }
    }

    #cta-1, #cta-2 {
        background-color: var(--bg-2);
        background-image: none;
        min-height: none;
    }
}