@media (max-width: 768px) {
    .main-body {
        gap: 20px; 
    }

    .main-card {
        grid-column: 1 / -1;
        margin-left: 5px;
        height: 400px;
    }



}



@media (max-width: 425px) {
    .card1 {
        margin-top: 70px;
    }

    .card2 {
        margin-left: 20px;
    }

    .card1 img {
        width: 160px;
    }

    .card2 img {
        width: 160px;
    }

    .card1 h3 {
        font-size: 25px;
    }

    .timer {
        font-size: 30px;
    }

    .card2 h3 {
        font-size: 25px;
    }

}


@media (max-width: 375px) {
    .card1 img {
        width: 140px;
    }

    .card2 img {
        width: 140px;
    }

    .timer {
        font-size: 25px;
    }

}

@media (max-width: 320px) {



    

    .card1 img {
        width: 130px;
    }

    .card1 h3 {
        font-size: 20px;
    }

    .timer {
        font-size: 20px;
    } 

    .card2 img {
        width: 130px;
    }

    .card2 h3 {
        font-size: 20px;
    }




}