Footer Banner

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-footer-banner{
    position: relative;
    overflow: hidden;
    padding: rem-calc(20 0);
    
    @include bp($lg){
        padding: 2em 0;
    }

    .container{
        position: relative;
        z-index: 10;
    }

    &-row{
        align-items: center;
        justify-content: center;
        
        @include bp($lg){
            justify-content: space-between;
        }
    }

    &-img{
        width: 100%;
        height: 50%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        @include bp($xl){
            height: 100%;
            bottom: inherit;
            top: 0;
        }
        img{
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: bottom left;
            @include bp($xl){
                object-position: top center;
            }
        }
    }

    .heading-col{
        text-align: center;
        margin-bottom: rem-calc(20);
        @include bp($lg){
            text-align: left;
            margin-bottom: rem-calc(0);
        }
    }

    .cta-col{
        display: flex;
        justify-content: center;
        @include bp($lg){
            justify-content: flex-end;
        }
    }

    .heading{
        font-size: rem-calc(24);
        line-height: rem-calc(32);
        letter-spacing: 0.02em;
        font-weight: 300;
        margin: 0;

        @include bp($xl){
            font-size: rem-calc(32);
            line-height: rem-calc(40);
        }
    }

    &.bg--primary{
        .heading{
            color: $white;
        }
    }
}