@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;

.two-cols-with-bg{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 83px 0;
    @include responsive(tablet){
        padding: 153px 0;
    }
    .bg-filter{
        position: absolute;
        background-color: $dark-color;
        opacity: 97%;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .wrapper{
        position: relative;
        z-index: 99;
        @include responsive(tablet){
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .col{
            @include responsive(tablet){
                flex: 0 0 50%;
            }
        }
        .col-text{
            @include responsive(desktop){
                padding: 0 35px 0;
            }
        }
    }
}

.imageLeft{
    flex-flow: row;
}
.imageRight{
    flex-flow: row-reverse;
}