.hero {
    position: relative;
    overflow: hidden;

    &.hide-bgimage {
        .bg-image {
            display: none;
        }
    }

    .hero-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

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

    .container {
        position: relative;
        z-index: 2;
    }

    .hero-inner {
        display: grid;
        gap: calc(var(--item-gap) * 2);
        align-items: center;

        @media (max-width: 767px) {
            gap: calc(var(--item-gap) * 1.5);
        }
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        gap: var(--item-gap);

        &>* {
            margin-bottom: 0;
        }

        @media (max-width: 767px) {
            text-align: center;
            align-items: center;
        }
    }

    .hero-phone a {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--item-gap) * .38);
    }
}