@media only screen and (min-width: 1024px) {

            main .grid1 {
                grid-template-columns: repeat(6, 1fr);
            }

            main .grid2 {
                grid-template-columns: repeat(4, 1fr);
            }

            main .grid3 {
                grid-template-columns: repeat(3, 1fr);
            }

            footer .grid4 {
                grid-template-columns: repeat(3, 1fr);
            }

            header .grid5 {
                grid-template-columns: repeat(3, 1fr);
            }
}


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

            main .grid1 {
                grid-template-columns: repeat(4, 1fr);
            }
            main .grid2 {
                grid-template-columns: repeat(2, 1fr);
            }

            main .grid3 {
                grid-template-columns: repeat(2, 1fr);
            }

            footer .grid4 {
                grid-template-columns: repeat(3, 1fr);
            }

            header .grid5 {
                grid-template-columns: repeat(3, 1fr);

            }

            header {
                flex-direction: column;
                height: 80vh;
            }



            header .grid5 .card3,
            header .grid5 .card2,
            header .grid5 .card1 {
                width: 250px;
                height: 250px;
                padding-top: 100px;
            }


}


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

            header {
                flex-direction: column;
                height: 60vh;
                padding-top: 100px;
            }

           main  .grid1 {
                grid-template-columns: repeat(2, 1fr);
            }

            main .grid2 {
                grid-template-columns: repeat(2, 1fr);
            }

            main .grid3 {
                grid-template-columns: repeat(1, 1fr);
            }

            footer .grid_4 {
                grid-template-columns: repeat(2, 1fr);
                text-align: center;   
            }

            header .grid5 {
                grid-template-columns: repeat(1, 1fr);
                margin-top: 100px;
                gap: 50px;
            }

            header .grid5 .card3,
            header .grid5 .card2,
            header .grid5 .card1 {
            width: 200px;
            height: 200px;
            }
}


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

            header {
                flex-direction: column;
                height: 40vh;
                padding-top: 100px;
            }

           main  .grid1 {
                grid-template-columns: repeat(1, 1fr);
            }

            main .grid2 {
                grid-template-columns: repeat(1, 1fr);
            }

            main .grid3 {
                grid-template-columns: repeat(1, 1fr);
            }

            footer .grid4 {
                grid-template-columns: repeat(1, 1fr);
                margin: auto;
                text-align: center;   
            }

            header .grid5 {
                grid-template-columns: repeat(1, 1fr);
                margin-top: 150px;
                gap: 30px;               
            }

            header .grid5 .card3,
            header .grid5 .card2,
            header .grid5 .card1 {
            width: 150px;
            height: 150px;
            }
}