@media (min-width: 1440px) and (min-height: 1356px) {

    #timer,
    #pontuacao,
    #reiniciar,
    #espiar {
        border: 0.4vw ridge #ff6a00;
        border-radius: 1vw;
        padding: 0.5vw;
    }

    #container_grid {
        gap: 2vw;
        grid-template: repeat(4, 200px) / repeat(4, 200px);
    }
    main {
        grid-template: 200px auto 200px/ 21% 1fr 1fr 20%;
    }
}

@media (min-height: 1000px) and (max-height: 1355px) {
    
    #container_grid {
        gap: 2vw;
        grid-template: repeat(4, 13vh) / repeat(4, 250px);
    }

    #timer,
    #pontuacao,
    #reiniciar,
    #espiar {
        border: 0.4vw ridge #ff6a00;
        border-radius: 1vw;
        padding: 0.5vw;
    }
}

@media (max-height: 734px) {
    #container_grid {
        grid-template: repeat(4, 16%) / repeat(4, 9%);
    }

    

    #ad1 {
        grid-area: 3 / 1 / 4 / 2;
        width: 100%;
        height: 100%;
    }

    #ad2 {
        grid-area: 3 / 4 / 4 / 5;
        width: 100%;
        height: 100%;
    }
}

@media (max-height: 563px) {
    #container_grid {
        gap: 25px;
        grid-template: repeat(4, 49px) / repeat(4, 79px);
    }

    .imagens {
        border: 4px ridge #ff6a00;
    }

    #timer,
    #pontuacao,
    #reiniciar,
    #espiar {
        border: 3px ridge #ff6a00;
    }

    #reiniciar {
        font-size: 1.5vw;
        padding: 3px;
    }
}

@media (max-width: 670px) {
    body {
        background-image: url(imagens/fundo_cell.jpg);
    }

    main {
        gap: 0px;
    }

    footer {
        font-size: 3vw;
    }

    #container_grid {
        grid-template: repeat(4, 67px) / repeat(4, 14%);
    }

    #reiniciar {
        font-size: 2vw;
        padding: 4px;
    }

    #espiar {
        font-size: 2vw;
    }

}