.parent {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 8px;
    height:80vh
}  
.div1 {
    grid-column: span 1 / span 1;
    grid-row: span 10 / span 10;
    padding: 15px 15px;
    box-shadow: 0px 0px 0px 0px seagreen;
    background-image: linear-gradient(#0F2A30, #255330, #286B59);
    background-color:#260724;
}

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
        .parent {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 8px;
            height:91vh
        }
            
        .div1 {
            grid-column: span 3 / span 3;
            grid-row: span 5 / span 5;
            grid-column-start: 3;
            padding: 15px 15px;
            box-shadow: 0px 0px 0px 0px seagreen;
            background-image: linear-gradient(#0F2A30, #255330, #286B59);
            background-color:#260724;
            border-radius: 0px;
        }
}