/* Estilos base para el hero section */

#header{
    height: 70px;
}

#logo-rambla {
    height: 50px;
}

#hero-section {
    height: auto;
    position: relative;
}

.banner-image {
    top: 0;
    left: 0;
    width: 100%;
}

.custom-btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;

    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
}

/* Estilos para pantallas pequeñas (max-width: 768px) */
#hero-section .banner-image#img-mobile {
    display: block;
}

#hero-section .banner-image#img-desktop {
    display: none;
}

/* Estilos para pantallas grandes (min-width: 768px) */
@media screen and (min-width: 768px) {

    #logo-rambla {
        height: 70px;
    }

    #hero-section .banner-image#img-mobile {
        display: none;
    }

    #hero-section .banner-image#img-desktop {
        display: block;
    }

    /*#hero-section {*/
    /*    height: 500px;*/
    /*}*/

}

/*@media screen and (min-width: 1024px) {*/
/*    #hero-section {*/
/*        height: 700px;*/
/*    }*/
/*}*/