@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap");

.NGR {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0 0;
    grid-template-areas:
        ". . ."
        ". . .";
    justify-content: start;
}
.NGR-images {
    width: 100%;
    padding: 5px;
    border-radius: 15px;
    filter: grayscale(50%);
    transition: all 0.3s ease;
}
.NGR-images:hover {
    width: 100%;
    padding: 0;
    filter: none;
    transition: all 0.3s ease;
    z-index: 10;
}
/* para 1200px o menos */
@media screen and (max-width: 1200px) {
    .NGR {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            ". ."
            ". ."
            ". .";
    }
/* para 700px o menos */
@media screen and (max-width: 700px) {
    .NGR {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "."
            "."
            "."
            "."
            "."
            ".";
    }
}