@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-homepage-hero {
    position: relative;
    overflow: hidden;

    &:hover {
        .parallax {
            img {
                transform: translateX(-5%);
            }
        }
        .block-hexagon {
            left: 120px;
        }
    }

    .container {
        h1 {
            span {
                white-space: initial;
            }
        }
    }

    &__padding {
        @include padding(rem-calc(40 0 40));

        @include bp($lg, true) {
            padding: 2.5rem 0 2.5rem;
        }
    }

    .row {
        @include bp($md, true) {
            flex-flow: column-reverse;
        }
    }

    &__text-wrapper {
        h1 {
            color: $secondary;
            font-weight: 700;
            @include margin-bottom(rem-calc(35));
        }

        .heading {
            @include margin-bottom(rem-calc(35));
            @include fluid-type(32, 70, 375, $max-container-size);
            line-height: 100%;
            color: $secondary;
            font-weight: 700;
            max-width: 100%;

            span {
                color: $primary;
            }
        }

        h5 {
            font-weight: 700;
            max-width: 70%;
            @include margin-bottom(rem-calc(45));
            color: $secondary;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        p {
            font-weight: 400;
            max-width: 70%;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }
    }

    &__image-wrapper {
        position: relative;
        text-align: right;

        @include bp($lg, true) {
            @include margin(rem-calc(3.875rem 0));
            text-align: center;
        }

        img {
            @media screen and (max-width: 768px) {
                max-width: 310px;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        .block-hexagon {
            position: absolute;
            left: 80px;
            top: -40px;
            max-width: 490px;
            z-index: -1;
            transition: all 2s ease;

            @media screen and (max-width: 1499px) {
                left: 0;
            }

            @media screen and (max-width: 1260px) {
                max-width: 440px;
            }

            @media screen and (max-width: 1100px) {
                max-width: 370px;
            }

            @media screen and (max-width: 992px) {
                max-width: 310px;
            }
        }

        .parallax {
            img {
                transition: all 1s ease;
                position: relative;

                &:hover {
                    transform: translateX(-5%);
                }
            }
        }
    }
}