@media (min-width: 768px) and (max-width: 1024px) {

    #elementoPai {

        display: grid;
        
        grid-template-columns: 100% auto;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "cabecario"
            "principal";
        row-gap: 40px;
    }
    
    #fotoMaiorJordan {
        background-image: url("../img/tablet.png");
        max-width: 100%;
        height: 400px;
        background-repeat: no-repeat; 
        background-size: cover;
    }

    #mensagemFoto {
        left: 5%;
    }
    #grid  {
    display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "primeiro segundo"
            "terceiro quarto" 
            "quinto sexto";
        column-gap: 32px;
        row-gap: 32px;
        padding: 20px;
    }
}
/*Mobile*/
@media (max-width: 767px) {
     #elementoPai {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "cabecario"
            "principal";
        row-gap: 10px;
   
    }

    #frete {    
        width: 100%;
    }

   #fotoMaiorJordan {
        background-image: url("../img/mobile.png");
        width: 100%;
        height: 400px;
        background-repeat: no-repeat;
        background-size: cover;
     
    }

    #mensagemFoto {
        left: 10%;
    }

    #fraseAnuncio {
        width: 328px;
        height: 66px;
        font-size: 16px; 
    }

/*Main*/

    #fraseLoja {
        position: relative;
        left: 10%;
        width: 319px;
        gap: 10px;    
        width: 319px;
        height: 94px;
    }

    #MelhoresLugar {
        width: 227px;
        height: 22px;
        font-size: 20px; 
    }
    #fraseMarcaJordan {
        text-align: center;
        font-size: 16px;
        width: 319px;
        height: 60px;
    }

    #grid  {
        width: 375px;
        display: grid;
        grid-template-columns: 375px;
        grid-template-rows: auto;
        grid-template-areas: 
            "primeiro"
            "segundo"
            "terceiro"
            "quarto" 
            "quinto" 
            "sexto";
        column-gap: 0px;
        row-gap: 32px;
        padding-left: 30px;
    }

    .tenis {
        width: 319px;
        height: 326px;
        display: flex;
        flex-flow: column wrap;
        justify-content: space-around;
        gap: 24px; 
    }

    .imagemCatalago {
        width: 100%;
        background-color: #F3F7FF;
        display: flex;
        justify-content: center;
        padding: 15px;
    }
  
    .imagem-tenis {
        width: 225px;
        height: 135px;
    }

    .subTituloTenis {
        width: 336px;
        height: 21px;
        font-style: normal;
        font-size: 16px;
    }

    .tituloTenis {
        width: 117px;
        height: 17px;
    }

}

}