@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {

    .Gridwrapper {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 10px;
        color: #444;
        
    }
    .Gridbox {
        background-color: lightgray;
        color: black;
        border-radius: 5px;
        border: medium;
        padding: 5px;
        font-size: 1em;
        text-align: center;
        margin-bottom: 5px;
    }

        .Gridbox h1 {
            font-size: 2em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            border: dashed;
        }
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 768px) {
    .Gridwrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 10px;
        color: #444;
    }

    .Gridbox {
        background-color: lightgray;
        color: black;
        border-radius: 5px;
        border: medium;
        padding: 5px;
        font-size: 1em;
        text-align: center;
        margin-bottom: 5px;
    }

.Gridbox h1 {
    font-size: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: dashed;
}