Hero: Slider

$hero-secondary__heading--font-style             : italic !default;
$hero-secondary__heading--font-family            : $font-family-base !default;
$hero-secondary__heading--font-weight            : $font-weight-bold !default;
$hero-secondary__heading--font-size              : 55px !default;
$hero-secondary__heading--line-height            : 110% !default;
$hero-secondary__heading--color                  : $white !default;
$hero-secondary__heading--text-shadow            : 2px 2px 7px $bg-color-dark !default;

$hero-tertiary__heading--title-font-size         : 30px !default;
$hero-tertiary__heading--title-line-height       : 110% !default;
$hero-tertiary__heading--title-font-weight       : $font-weight-normal !default;
$hero-tertiary__heading--title-color             : $theme-second !default;

$hero-tertiary__heading--description-font-size   : 15px !default;
$hero-tertiary__heading--description-line-height : 165% !default;
$hero-tertiary__heading--description-color       : $white !default;
$hero-tertiary__heading--description-font-weight : $font-weight-normal !default;
$hero-advanced__column-gap                       : 1% !default;
$hero-advanced__grid-template-columns            : 69% 30% !default;

.hero {
    &--advanced {
        display: flex;
        flex-direction: column;
        padding: 0;

        @include mq($screen-m) {
            position: relative;
            margin: $spacer--semi-medium 0;
        }
        .hero--secondary {
            @include mq($screen-l) {
                max-height: 465px;
            }
        }
        &__cols {
            @include mq($screen-l) {
                max-width: 500px;
                padding-right: 10px;
            }
        }
        &__wrapper {
            position: absolute;
            margin-top: $spacer--extra-large;
            padding: $spacer--large;
            bottom: $spacer--medium;
            background: rgba(255, 255, 255, 0.65);
            border-radius: 0 15px 15px 0;
        }
        &__right {
            display: flex;
            flex-direction: row;
            @include mq($screen-m) {
                display: grid;
                row-gap: 1.4%; // sass-lint:disable-line no-misspelled-properties
            }
        }
        &__item {
            display: flex;
            padding: $spacer 0 0;
            @include mq($screen-m) {
                padding: 0;
            }
            a {
                width: 100%;
            }
        }
    }
    &__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        background: linear-gradient(90deg, #444 1.5%, rgba(31, 27, 26, 0) 110%);
        &.no-shadow {
            background: transparent;
        }
        @include mq($screen-m) {
            flex-direction: row;
        }
    }

    &__text {
        width: 100%;

        &--heading--first {
            display: flex;
            flex-direction: column;
            font-style: $hero-secondary__heading--font-style;
            font-family: $hero-secondary__heading--font-family;
            font-weight: $hero-secondary__heading--font-weight;
            font-size: $hero-secondary__heading--font-size;
            line-height: $hero-secondary__heading--line-height;
            color: $hero-secondary__heading--color;
            text-shadow: $hero-secondary__heading--text-shadow;
        }

        &--color {
            font-style: $hero-secondary__heading--font-style;
            font-weight: $hero-secondary__heading--font-weight;
            font-size: $hero-secondary__heading--font-size;
            line-height: $hero-secondary__heading--line-height;
            color: $theme-second;
            //-webkit-text-fill-color: transparent; // sass-lint:disable-line no-vendor-prefixes
            //-webkit-text-stroke-width: 2px; // sass-lint:disable-line no-vendor-prefixes
            //-webkit-text-stroke-color: $theme-second; // sass-lint:disable-line no-vendor-prefixes
        }

        &--heading--second {
            font-family: $font-family-sans-serif;
            font-size: $font-size-medium;
            color: $hero-tertiary__heading--description-color;
            margin-bottom: 1em;
            letter-spacing: 0.5px;
            width: 60%;
        }

        &--heading--title {
            font-weight: $hero-tertiary__heading--title-font-weight;
            font-size: $hero-tertiary__heading--title-font-size;
            line-height: $hero-tertiary__heading--description-line-height;
            color: $hero-tertiary__heading--description-color;
        }

        &--heading--description {
            font-weight: $hero-tertiary__heading--description-font-weight;
            font-size: $hero-tertiary__heading--description-font-size;
            line-height: $hero-tertiary__heading--description-line-height;
            color: $hero-tertiary__heading--description-color;
        }
    }

    &__image {
        display: none;

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

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

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

    &--secondary {
        display: grid;
        grid-template-areas: "overflow";
        height: 490px;
        border-radius: 1rem;

        @include mq($screen-m) {
            height: 465px;
        }

        & .hero__wrapper {
            grid-area: overflow;
            position: relative;
        }
        & .hero__background {
            border-radius: 1rem;
            .image {
                border-radius: 1rem;
                img {
                    max-width: 780px;
                    border-radius: 1rem;
                }
            }
        }
    }

    &--category {
        background-color: $black;
        margin-bottom: $spacer--semi-medium;

        @include mq($screen-m) {
            height: 320px;
        }
    }
    // ==============
    // HERO SLIDER
    // ==============
    &-slider {
        position: relative;
        overflow: hidden;
        transition: $transition-base;

        &__inner {
            display: grid;
            grid-auto-columns: 100%;
            grid-auto-flow: column;
            overflow: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            padding: 0;

            @include mq($screen-m) {
                overflow: hidden;
            }
        }

        &--responsive {
            & .slider__inner {
                @include mq($screen-m) {
                    grid-auto-flow: row;
                }
            }
        }


        &__button {
            display: none;
            position: absolute;
            z-index: 9;
            top: 45%;
            padding: $spacer;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid $theme-primary;
            border-radius: 10px;

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

            &--left {
                left: 0;
            }

            &--right {
                right: 0;
            }

            &--icon {
                fill: $theme-primary;
                width: $spacer--25;
                height: $spacer--25;

            }
        }
    }
    &-3image {
        max-width: 75px;
        @include mq($screen-m) {
            max-width: 125px;
        }
        img {
            height: auto;
            max-width: 75px;
            border-radius: 6px;
            @include mq($screen-m) {
                max-width: 125px;
            }
        }
    }
    //sass-lint: disable no-important
    &--location {
        margin: 0 !important;

        .hero {
            &__wrapper {
                border-radius: 15px;
                overflow: hidden;
                background: none;
            }
            &__background {

            }
        }
    }
    //sass-lint: enable no-important
}