.hero {
    width: 100vw;
    height: 100vh;
    height: 100svh;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    position: relative;
    top: 0;
    left: 0;

    /* z-index: 200; */
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* display: block; */
}

.hero__bg--desktop {
    display: block;
}

.hero__bg--mobile {
    display: none;
}

.hero__full-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
}

.hero__logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    margin: var(--margin-medium) 0;
}

.hero__link {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;

    margin: var(--margin-medium) 0;
}

.hero__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* si un truc empêche le clic (souvent le cas) */
.hero__inner,
.hero__inner * {
    pointer-events: none;
}



/* ==============================
        MEDIA QUERIES   
================================= */

@media (max-width: 767px) {

    .hero__bg--desktop {
        display: none;
    }

    .hero__bg--mobile {
        display: block;
    }
}