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

.two-cols{
    padding: 45px 0;
    @include responsive(tablet){
        padding: 153px 0;
    }
    .wrapper{
        @include responsive(tablet){
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .col{
            @include responsive(tablet){
                flex: 0 0 50%;
            }
        }
        .col-text{
            margin-bottom: 50px;
            @include responsive(desktop){
                padding: 0 35px 0;
            }
        }
        .col-image{
            .image-wrapper{
                position: relative;
            }
            .image-wrapper::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 100%;
                display: block;
                top: -12px;
                left: -12px;
                z-index: 9;
            }
            img{
                position: relative;
                z-index: 990;
            }
        }
        &.imageLeft{
            flex-flow: row-reverse;
            .image-wrapper{
                &::before{
                    clip-path: polygon(0% 0%, 97% 0, 100% 4%, 100% 100%, 0% 100%);
                    top: -12px;
                    left: inherit;
                    right: -12px;
                }
            }
        }
        &.imageRight{
            flex-flow: row;
            .image-wrapper{
                &::before{
                    clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
                    top: -12px;
                    left: -12px;
                }
            }
        }
    }
    &.bg-light{
        .wrapper{
            .image-wrapper{
                &::before{
                    background-color: $dark-color;
                }
            }
        }
    }
    &.bg-dark{
        .wrapper{
            .image-wrapper{
                &::before{
                    background-color: $accent-color;
                }
            }
        }
    }
}