@media (max-width: 1023px) {
    html {
    font-size: 20px;
    }

 

    .item img{
       
    }

    .item{
        max-height: none;
    
    }

    #vetrina{
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        /*
        repeat serve a creare un certo numero di colonne
        numero di colonne = numero_statico | auto-fit | auto-fill
        minmax: dimnensione minima, occupa fino a 1fr
        fr: una frazione dello spazio disponibile quando sono stati sistemati gli elementi statici
        quando la dimensione scende sotto quella minima, wrap automatico (l'elemento va a capo)
        */
        
        justify-items: normal;
    
    }


    nav ul{
        flex-wrap: wrap;
        gap:0.2rem; 
        
    }


    .nome{
       font-size: 2rem;
    }

    nav{
        position: fixed; 
        top:5rem; 
         left:0rem; 
    }

    nav ul li button{
        padding:0px; 
          font-size: 1rem;
             font-style: italic;
    }

    nav ul li button:hover{
        font-weight: bolder;
          font-style: normal;
        color:white; 
        background-color: rgb(0, 160, 99);

     
    }

    /*#contatti{
        position: absolute; 
        width:25%; 
        height:9rem; 
        top:1rem;
        right:0%; 
        font-size: 1.5rem;
    }*/

  
    
    h1{
        position:absolute; 
        top:0.2rem; 
        font-size: 2rem;
        padding:0rem; 
        margin:0rem; 
        /*right:4rem;*/ 
        left:6rem;

    }

   #sottotitolo1{
    position:absolute; 
        top:3.1rem; 
        left:6.7rem; 
        width:70%; 
        font-size:1.1rem; 
    }

    #sottotitolo2{
        position:absolute;
        font-size: 1.2rem;
        top:1.6rem; 
        width:70%; 
        left:6.5rem; 
    }


   

     header{
        position:fixed; 
        width:100%; 
        height:14%; 
        top:0rem; 
        left:0rem; 
        /*background-color: dodgerblue;*/
    }

     #logo{
        position:absolute; 
        top:0.2rem; 
        width:5.5rem; 
        left:0.1rem; 
        aspect-ratio: 1/1;

    }

    #dettagli_veicolo{
        position:fixed; 
        width:100%; 
        height:86%; 
        top:14%; 
        z-index:2; 
        background-color: aliceblue;
    }

    #galleria{
        position:absolute; 
        width:96%; 
        height:50%; 
        left:2%; 
        top:11%; 
    }

    #immagine_principale{
        position:absolute; 
        top:0%;
        width:100%;
        height:80%;  
        aspect-ratio: 4/3;
        left:0%; 
        border-radius: 2rem;
    }

    #immagine_principale img{
        border-radius: 2rem;
    }

    #img_prec, #img_succ{
        position:absolute; 
        background-color: rgb(0, 160, 99);
        width:3rem; 
        height:3rem; 
        aspect-ratio: 1/1;
        color:white; 
        bottom:0%; 
        font-size: 2em;
        border-radius: 0.5em;

    }

    #icone{
        position:absolute; 
        display:flex; 
        flex-direction: row;
        flex-wrap: nowrap;

        gap:1%; 
        width:100%; 
        bottom:0%; 
    }

    .icona{
        flex-basis:50px; 
        flex-grow: 1;
        display:inline; 

        border-radius: 10px;
        aspect-ratio: 4/3;
        height:100%; 
        opacity:0.7; 
    }

    .icona img,
    #immagine_principale img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #dettagli{
        position:absolute; 
        bottom:2%; 
        left:3%;

        border-radius: 2rem;
        height:11rem; 
        width:90%;
        font-size:1.2rem;
        padding:0.5rem;  
    }

    .nome{
        height:13%; 
      	bottom:0px; 
        font-size: 1.1rem;
    }

    #nome2{
        position:absolute; 
        top:1%; 
        left:2%;
      
        height:5rem; 
        width:80%;
        font-size:1.3rem; 
        text-align: center;
        padding-top:0.4em; 
    }

    .contatto{
        width:90%; 
        font-size:1.6rem; 
        margin-top:2%; 
        margin-left:3%; 
        padding:2%; 
        color:rgb(255, 255, 255); 
        font-weight:bolder; 
        text-align: center;
        border:0.2rem solid white; 
        border-radius:1rem; 
        background-color: rgb(0, 160, 99);
    }

    .valore_contatto{
        margin-top:0%; 
    }

    .contatto img{
        width:140px; 
        aspect-ratio: 1/1;
    }

    #maps{
        text-decoration: underline;
    }




}