.hero {
    display: flex;
    justify-content: space-between;
    position: relative
}

.hero__item p {
    font-size: 2rem;
    line-height: 28px
}

@media (max-width: 992px) {
    .hero {
        flex-direction:column
    }
}

.body-container--about-us .hero__item h1 {
    display: contents
}

.hero__item em {
    background-color: var(--primary_color_light);
    color: var(--primary_color_2);
    border-radius: 10px;
    display: inline-block;
    font-style: normal;
    padding: var(--spacer_8) calc(var(--spacer_24) - var(--spacer_4));
    width: fit-content
}

@media (max-width: 992px) {
    .hero__item h1>em {
        margin:auto
    }
}

.hero__item--major {
    min-width: 500px;
    padding-top: var(--spacer_32);
    width: calc(var(--column_width_px)*5 + var(--gutter_width_px)*5)
}

.hero__item--minor {
    min-height: 100px;
    padding-left: var(--gutter_width_px);
    width: calc(var(--column_width_px)*6 + var(--gutter_width_px)*5)
}

@media (max-width: 992px) {
    .hero__item--major {
        margin-bottom:var(--spacer_48);
        padding-top: 0;
        text-align: center
    }

    .hero__item--major,.hero__item--minor {
        padding-left: 0;
        width: 100%
    }

    .hero__item--major {
        min-width: 100%
    }

    .hero__item--minor img {
        margin: auto
    }
}

.hero__item__buttons {
    align-items: center;
    display: flex;
    gap: var(--spacer_32);
    margin-top: 32px
}

@media (max-width: 992px) {
    .hero__item__buttons {
        display:flex
    }

    .hero__item__buttons>span {
        margin: auto
    }

    .hero__item__buttons>span:not(.hero__item__buttons>span:first-child) {
        display: none
    }

    .hero__item__buttons .cta_button {
        margin-right: 0
    }
}

.hero__overlay-image {
    height: 100%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    transition: left .3s
}

@media (max-width: 1100px) {
    .hero__overlay-image {
        left:55%;
        transition: left 0s
    }
}

@media (max-width: 992px) {
    .hero__overlay-image {
        height:357px;
        position: relative;
        width: 100%
    }
}

.shape-hero {
    bottom: -8rem;
    position: absolute
}

.hero__item--major>img {
    margin-bottom: 4rem
}

.hero__container-meta-logo {
    margin-top: var(--spacer_40)
}

@media (max-width: 992px) {
    .hero__container-meta-logo img {
        margin:0 auto
    }
}