.grid3 {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    border-bottom: solid 1px rgb(63, 63, 63);
    border-left: solid 1px rgb(63, 63, 63);
    border-right: solid 1px rgb(63, 63, 63);
}

.grid2 {
    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: solid 1px rgb(63, 63, 63);
    border-left: solid 1px rgb(63, 63, 63);
    border-right: solid 1px rgb(63, 63, 63);
}


.grid2 {
    visibility: hidden;
}

.grid1 {
    visibility: hidden;
}

.grid0 {
    visibility: hidden;
}

@media only screen and (min-width: 852px) {
    .grid1 {
        display: none;
    }
    .grid0 {
        display: none;
    }
    .grid2 {
        display: none;
    }
}

@media only screen and (max-width: 850px) {
    .grid3 {
        display: none;
    }
    .grid3 {
        visibility: hidden;
    }
    .grid2 {
        visibility: visible;
    }
    .grid0 {
        visibility: visible;
    }
    .grid1 {
        visibility: hidden;
    }
    .grid1 {
        display: none;
    }
}

@media only screen and (max-width: 375px) {
    .grid1 {
        visibility: visible;
    }
    .grid3 {
        display: none;
    }
    .grid2 {
        display: none;
    }
    .grid0 {
        display: none;
    }
    .grid1 {
        display: block;
    }
}