* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* SFONDO NERO OVUNQUE */
html, body {
    height: 100%;
    background: black;
    font-family: Arial, sans-serif;
}

/* CONTENITORE GENERALE */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* CONTENITORE IMMAGINE */
.image-wrapper {
    position: relative;
}

/* IMMAGINI */
.hero-img {
    display: block;
}

/* ================= DESKTOP ================= */
.desktop {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
}

/* ================= MOBILE ================= */
.mobile {
    display: none;
    width: 100%;
    height: auto;
}

/* SWITCH MOBILE */
@media (max-width: 768px) {
    .hero {
        display: block;
        min-height: auto;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
}

/* BOTTONI BASE */
.btn {
    position: absolute;
    bottom: 0;
    height: 100pt;

    /* BLOCCA QUALSIASI EFFETTO VISIVO */
    background: transparent;
}

/* RIMUOVE CAMBI VISIVI SU HOVER/CLICK */
.btn:hover,
.btn:active,
.btn:focus {
    background: transparent;
    outline: none;
    box-shadow: none;
}

/* DESKTOP */
@media (min-width: 769px) {

    .btn {
        width: 25%;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
}

/* MOBILE */
@media (max-width: 768px) {

    .btn {
        width: 50%;
        height: 100pt;
        bottom: 0;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
}