@media (min-width: 768px) {
    body {
        height: 80vh;
    }
    main {
        display: grid;
        width: 80%;
        height: 80%;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(4,calc(100% / 6));
        gap: 20px;
    }

    .card {
        width: 100%; 
        height: 100%;
    } 
    .container {
        width: 100%;
        height: 100%;
    }

    .card-1 {
        grid-column:2/4 ;
        grid-row: 1/3;
    }
    .card-2 {
        grid-row: 3/5;
        grid-column: 2/3;
    }
    .card-3 {
        grid-row: 3/5;
        grid-column: 3/4;
    }
    .card-4 {
        grid-row: 1/5;
        grid-column: 4/5;
    }
    .card-5 {
        grid-row: 5/7;
        grid-column: 3/5;
    }
    .card-6 {
        grid-row: 5/7;
        grid-column: 2/3;
    }
    .card-7 {
        grid-row: 1/4;
        grid-column: 1/2;
    }
    .card-8 {
        grid-row: 4/7;
        grid-column: 1/2;
    }

    /*  */
    .card-5 .container {
        flex-flow: row; 
        width: 100%;  
        height: 100%;
        gap: 10px;
        text-align: left;
    }
    .card-5 img {
        width: 50%;
    }
    
    .card-7 .container,
    .card-8 .container,
    .card-6 .container,
    .card-3 .container,
    .card-4 .container {
        width: 100%;
        height: 100%;
        text-align: left;
    }


    .card-1 img {
        width: 50%;
    }

    .card-2 p {
        font-size: 1.5em;
        font-weight: 500;
    }

    .card-6 p {
        font-size: 14px;
    }
    .card-6 span {
        font-size: 3em;
    }

    .card-3 p {
        font-size: 1.5em;
    }
    .card-3 img {
        bottom: -20%;
        left: -0%;
    }

    .card-4 {
        overflow: hidden;
    }
    .card-4 .container {
        justify-content: space-evenly;
    }
    .card-4 p:nth-child(2) {
        font-size: 1em;
        /* width: 50%; */
    }
    .card-4 p:nth-child(1) {
        font-size: 1.5em;
    }
    .card-4 img {
        scale: 1.5 ;
        position: relative;
        right: -45%;
    }

    .card-7 .container {
        justify-content: center;
    }
    .card-7 p {
        font-size: 1.5em;
        font-weight: 500;
    }
    .card-7 img {
        width: 100%;
    }

    .card-8 .container {
        justify-content: space-between;
    }
    .card-8 p {
        font-size: 2em;
        font-weight: 500;
    }
    .card-8 img {
        height: 60%;
        width: 100%;
    }

}

@media (min-width: 1550px) {
    .card-4 img {
        scale: 1.3 ;
        position: relative;
        right: -45%;
    }

}