.bloc.hero_A {
    margin-top: var(--height-header);
    height: calc(100vh - var(--height-header));
}

.bloc.hero_A .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--gap-xs);
}

.bloc.hero_A .wrapper a.left,
.bloc.hero_A .wrapper a.right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--color-white);
    transition: all 300ms ease-in-out;
    background-color: var(--color-black-trans-plus);
}

.bloc.hero_A .wrapper a.left:hover,
.bloc.hero_A .wrapper a.right:hover {
    background-color: var(--color-black-trans-mid);

}

.bloc.hero_A .wrapper.nb2 a.left {
    width: 60%;
}
.bloc.hero_A .wrapper.nb2 a.right {
    width: 40%;
}
.bloc.hero_A .wrapper.nb1 a.left {
    width: 100%;
}

.bloc.hero_A .wrapper a.left .title-1,
.bloc.hero_A .wrapper a.right .title-1 {
    font-size: 2rem;
    font-weight: bold;
}

.bloc.hero_A .wrapper a.left .title-2,
.bloc.hero_A .wrapper a.right .title-2 {
    font-size: 4.5rem;
    font-weight: bold;
}

.bloc.hero_A .wrapper a.left .title-1,
.bloc.hero_A .wrapper a.right .title-1, 
.bloc.hero_A .wrapper a.left .title-2,
.bloc.hero_A .wrapper a.right .title-2 {
    width: 80%;
}

.bloc.hero_A .wrapper a.left span,
.bloc.hero_A .wrapper a.right span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    gap: var(--gap-xs);
    bottom: var(--gap-3);
    right: var(--gap-3);
    font-size: 2rem;
}

/************************************************************************
                               RESPONSIVE
************************************************************************/

@media (max-width: 768px) {
    .bloc.hero_A .wrapper.nb2 {
        flex-direction: column;
    }

    .bloc.hero_A .wrapper.nb2 a.left,
    .bloc.hero_A .wrapper.nb2 a.right {
        width: 100%;
        height: 50%;
    }
}

@media (max-width: 480px) {
    .bloc.hero_A {
        margin-top: var(--height-header-mobile);
        height: calc(100vh - var(--height-header-mobile));
    }

    .bloc.hero_A .wrapper a.left .title-1,
    .bloc.hero_A .wrapper a.right .title-1 {
        font-size: 1.8rem;
    }

    .bloc.hero_A .wrapper a.left .title-2,
    .bloc.hero_A .wrapper a.right .title-2 {
        font-size: 3.5rem;
    }

    .bloc.hero_A .wrapper a.left span,
    .bloc.hero_A .wrapper a.right span {
        font-size: 1.5rem;
        bottom: var(--gap);
        right: var(--gap);
    }
}