.banner-container {
    border: 0px;
    background: linear-gradient(to right, #417dc3, #aa5ddf); /* Il tuo gradiente */
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;     /* Centra verticalmente */
    height: auto; /* Altezza predefinita per schermi più grandi */
}

.banner-container img {
    max-width: 100%; /* L'immagine si adatta alla larghezza del contenitore */
    height: auto;    /* Mantiene le proporzioni */
}

/* --- Media Query per Dispositivi Mobili (sia Android che iOS) --- */
@media (max-width: 768px) { /* Applica questi stili quando la larghezza dello schermo è di 768px o meno */
    .banner-container {
        height: auto; /* Riduce l'altezza del container su schermi più piccoli */
    }
}

@media (max-width: 480px) { /* Per schermi molto piccoli (es. smartphone in verticale) */
    .banner-container {
        height: auto; /* Ulteriore riduzione per schermi molto stretti */
    }
}