.q1 {
    grid-row: 10 / span 40;
    grid-column: 7 / span 40;
}

.q2 {
    grid-row: 10 / span 40;
    grid-column: 53 / span 40;
}

.q3 {
    grid-row: 55 / span 40;
    grid-column: 7 / span 40;
}

.q4 {
    grid-row: 55 / span 40;
    grid-column: 53 / span 40;
}

div {
    transition: ease-in-out 0.2s;
}
div:hover {
    scale: 1.05;
}

.q1:hover, .q3:hover {
    rotate: 4deg;
}
.q2:hover, .q4:hover {
    rotate: -4deg;
}



@media (max-width: 640px) {
    .q1 {
        grid-row: 10 / span 20;
        grid-column: 15 / span 70;
    }
    .q2 {
        grid-row: 30 / span 20;
        grid-column: 15 / span 70;
    }
    .q3 {
        grid-row: 50 / span 20;
        grid-column: 15 / span 70;
    }
    .q4 {
        grid-row: 70 / span 20;
        grid-column: 15 / span 70;
    }
    div:hover {
        scale: 1;
    }
}