section.hero {
    position: relative;

    padding: 0;

    .container--fluid {
        position: relative;

        width: 100%;
        height: 100lvh;

        .h--title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            color: var(--white);

            z-index: 1;
        }

        .image--background {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            object-fit: cover;

            display: block;
            height: 100%;

            z-index: 0;

            &:after {
                content: ' ';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;

                background: var(--black);
                opacity: 0.5;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;

                border-radius: calc(var(--border-radius) * 1.25);
            }
        }

            .image.breaker {
                position: absolute;
                bottom: 15%;
                right: 15%;

                max-width: 150px;
                @media(min-width: 992px) {
                    bottom: 21%;
                    right: 31%;

                    max-width: 250px;
                }

                z-index: 0;
            }

        .btn--scroll-down {
            position: absolute;
            bottom: var(--gutter-width);
            left: calc(var(--gutter-width) * 10);

            @media(max-width: 767px) {
                left: unset;
                right: 0;
            }
        }
    }
}