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

    #DocWrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        color: #444;
        border:solid 
        
    }
    .Docbox {
       
        padding: 5px;
        font-size: 1em;
        text-align: center;
        margin-bottom: 5px;
        border:solid ;

    }

        .Docbox h1 {
            font-size: 2em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            border: dashed;
        }
    .DocIcon {
        width: 33%
    }
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    #DocWrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        color: #444;
       
    }

    .Docbox {
       
        
       
        font-size: 1em;
        text-align: center;
        margin-bottom: 5px;
        
    }

        .Docbox h1 {
            font-size: 2em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
           
        }
        .DocIcon {
            width:100%
        }
}