@use '../../colors';
@use '../../breakpoints';

$background-offset: -2.8rem;
$background-height: 2.8rem;

.bz-euvou-bazza-block {
    position: relative;
    //background-image: url(../../assets/img/block-eu-vou-bazza-bg.svg);
    background-position: center $background-offset;
    background-repeat: repeat;
    &::before {
        position: absolute;
        top: $background-offset;
        content: "";
        display: block;
        width: 100%;
        bottom: 0;
        //height: $background-height;
        background-image: url(../../assets/img/block-eu-vou-bazza-bg.svg);
        background-position: center top;
        background-repeat: repeat;
    }
    .bz-content {
        position: relative;
        &::before {
            position: absolute;
            left: 0;
            bottom: -6.25rem;
            z-index: 2;
            content: "";
            display: block;
            width: 60%;
            height: calc(100% + 11rem);
            background: transparent url(../../assets/img/couple-glasses.png) left bottom no-repeat;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left bottom;
        }
    }
    .bz-content > div > * {
        position: relative;
        z-index: 2;
    }
    .bz-euvou-bazza-block-wrapper {
        position: absolute !important;
        top: $background-offset;
        z-index: 1 !important;
        left:0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    &__bg {
        position: absolute !important;
        left: 50%;
        transform: translateX(-50%);
        overflow: visible;
    }
}

@media (max-width: breakpoints.$desktop-large) {
    .bz-euvou-bazza-block {
        .bz-content {
            &::before {
                //display: none;
                width: 50%;
            }
        }
    }
}

@media (max-width: breakpoints.$tablet) {
    .bz-euvou-bazza-block {
        .bz-content {
            &::before {
                //display: none;
                bottom: -28%;
            }
        }
    }
}
@media (max-width: breakpoints.$mobile) {
    .bz-euvou-bazza-block {
        .bz-content {
            &::before {
                display: none;
            }
        }
        .align-items-end {
            align-items: center !important;
        }
    }
}