@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.banner{
    &--container{
        &-breadcrumb{
            top: 0;
            z-index: 1;
        }
        &-content{
            position: absolute;
            
            width: 50%;
            z-index: 2;
            @include max(640){
                width: 100%;
            }
        }
        &-image{
            width: 60%;
            @include max(640){
                width: 100%;
            }
        }
        &-shade{
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba($black, 0.2);
            }
        }
    }
    &--gradient{
        background: radial-gradient($white,rgba($lightGrey,0.3));
    }

    &--slider{
        &-image{
            width: 40%;
            img{
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                @include maxOrientation(1024, portrait) {
                    border-top-right-radius: 10px;
                    border-bottom-left-radius: 0;
                }
            }
            @include maxOrientation(1024, portrait) {
                width: 100%;
            }
        }
        &-data{
            width: 60%;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            @include maxOrientation(1024, portrait) {
                width: 100%;
                // min-height: 470px;
                height: 100%;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 10px;
            }
        }
    }
}