Banner: Default

$banner--footer__heading--font-style                    : $font-style-italic !default;
$banner--footer__heading--font-weight                   : $font-weight-normal !default;
$banner--footer__heading--font-size                     : 55px !default;
$banner--footer__heading--line-height                   : 140% !default;
$banner--footer__heading--color                         : $color-tertiary !default;
.banner {
    display: grid;
    background: rgb(0, 0, 0);
    height: 400px;
    margin: 0 0 $spacer--15 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;

    @include mq($screen-m) {
        background-position: right;
    }
    & .banner__gradient {
        width: 100%;
        height: 100%;
        position: absolute;

        background-image: linear-gradient(100deg, rgba(0, 0, 0, 1) 20%, rgba(0, 154, 125, 0) 100%);

        @include mq($screen-m) {
            background: linear-gradient(100deg, rgba(0, 0, 0, 1) 0%, rgba(0, 154, 125, 0) 100%);
        }

        @include mq($screen-l) {
            background: linear-gradient(100deg, rgba(0, 0, 0, 1) 20%, rgba(0, 154, 125, 0) 100%);
        }

        @include mq($screen-xl) {
            background: linear-gradient(100deg, rgba(0, 0, 0, 1) 40%, rgba(0, 154, 125, 0) 100%);
        }

        @include mq($screen-xxl) {
            background: linear-gradient(100deg, rgba(0, 0, 0, 1) 50%, rgba(0, 154, 125, 0) 100%);
        }
    }

    & .banner__content {
        position: relative;
        z-index: 10;
        padding-top: $spacer--4;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    & .banner__inner {
        background-repeat: no-repeat;
        background-position: right;
    }

    & .banner__title {
        font-size: $font-size-xxl;
        color: $color-tertiary;
        font-style: $font-style-italic;
        font-weight: $font-weight-normal;
        max-width: 384px;
        margin-bottom: $spacer--1;
    }

    & .banner__description {
        max-width: 384px;
        margin-bottom: $spacer--2;

        font-weight: $font-weight-normal;
        font-size: $font-size-base;
        color: $gray-lightest;

        @include mq($screen-m) {
            font-size: 15px;
        }
    }
    &--footer {
        display: grid;
        grid-template-areas: "overflow";
        height: auto;

        @include mq($screen-m) {
            height: 515px;
        }
        &__text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0 auto;
            max-width: 400px;
            @include mq($screen-m) {
                margin: 0 40% 0 0;
                max-width: 600px;
                padding: $spacer--25;
                background: rgba(0, 0, 0, 0.5);
            }
            &--heading--first {
                background: transparent;
                font-style: $banner--footer__heading--font-style;
                font-weight: $banner--footer__heading--font-weight;
                font-size: $banner--footer__heading--font-size;
                line-height: $banner--footer__heading--line-height;
                color: $banner--footer__heading--color;
                display: flex;
                flex-direction: column;
                transform: skewX(-6deg);
            }
            &--description {
                color: $white;
                font-size: 19px;
                line-height: 1.7;
                font-weight: 400;
                margin-bottom: $spacer--25;
                font-style: italic;
                text-transform: none;
            }
            &--heading--second {
                font-family: $font-family-saira;
                font-size: $font-size-medium;
                line-height: $banner--footer__heading--line-height;
                color: $gray-light;
            }

            &--color {
                font-style: $banner--footer__heading--font-style;
                font-weight: $banner--footer__heading--font-weight;
                font-size: $banner--footer__heading--font-size;
                line-height: $banner--footer__heading--line-height;
                -webkit-text-fill-color: transparent; // sass-lint:disable-line no-vendor-prefixes
                -webkit-text-stroke-width: 1px; // sass-lint:disable-line no-vendor-prefixes
                -webkit-text-stroke-color: $color-tertiary; // sass-lint:disable-line no-vendor-prefixes
            }
        }

        &__image {
            display: none;

            @include mq($screen-m) {
                display: block;
            }
        }

        &__background {
            grid-area: overflow;
            height: inherit;

            & .image {
                object-fit: cover;
                object-position: top;
                height: 100%;
            }
        }
        &__wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background: transparent;
            grid-area: overflow;
            position: relative;
            padding: $spacer--l;
            @include mq($screen-m) {
                flex-direction: row;
            }
        }
        &__background {
            grid-area: overflow;
            height: inherit;

            & .image {
                object-fit: cover;
                object-position: center;
                height: 100%;
            }
        }
    }

}