.container {
    max-width: 360px;
    margin-inline: auto;
    padding-inline: 0.5rem;
    /* border: 5px solid red; */
    position: relative;
    /* overflow: hidden; */
    /* width: 100%; */
    height: 100%;
}




@media (min-width: 475px){
    .container{
        max-width: 475px;
    }
}

@media (min-width: 640px){
    .container{
        max-width: 640px;
    }
}

@media (min-width: 768px){
    .container{
        max-width: 768px;
    }
}

@media (min-width: 1024px){
    .container{
        max-width: 1024px;
    }
}

@media (min-width: 1280px){
    .container{
        max-width: 1280px;
    }
}

@media (min-width: 1536px){
    .container {
        max-width: 1280px;
    }
}



/* Prova */

/* Sblocca il wrapper di pagina su mobile 
.bg__container { max-width: 100%; } /* sovrascrive i 475px di global.css */

/* Evita il tappo del .container proprio nell’hero 
.hero.container { max-width: 100%; }

/* Logo responsive: riempi il contenitore fino a 600px 
.hero__logo {
  width: 100%;
  max-width: 464px;
  height: auto;
  display: block;
  margin: 0 auto;
} */

/* .hero.container {
    max-width: 100%;
} */