// HERO
.hero{

    .container{
        padding: 0;
    }

    @include desktop{

        .container{
            position: relative;
            padding-bottom: 12rem;
        }
    }
}

.hero__image{
    overflow: hidden; // for mouse animation

    img{
        display: block;
        width: 100%;
        object-fit: cover;
    }

    @include mobile{

        img{
            height: 18rem;
        }
    }

    @include desktop{
        z-index: 1;
        position: absolute;
        top: 6rem;
        left: 0;
        right: 0;
        bottom: 0;

        img{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
        }
    }
}

.hero__content{
    padding-top: 6rem;
    padding-bottom: 6rem;
    color: white;

    h1{
        margin-top: 0;
    }
    p{
        margin-top: 3rem;
    }
    .button{
        margin-top: 3rem;
    }

    @include mobile{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    @include desktop{
        z-index: 2;
        position: relative;
        margin-left: 50%;

        // gradient background
        &:before{
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            left: -6rem;
            right: 0;
            bottom: 0;
            background: $grey--dark;
        }
    }
    @include desktop--small{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    @include desktop--large{
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.hero--main{

    @include mobile{
        background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));
    }

    @include desktop{

        .hero__content:before{
            background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));
        }
    }
}
.hero--secondary{

    .button{
        color: $secondary;
    }

    @include mobile{
        background: linear-gradient(45deg, $secondary, mix($main, $secondary, 50%));
    }

    @include desktop{

        .hero__content:before{
            background: linear-gradient(45deg, $secondary, mix($main, $secondary, 50%));
        }
    }
}