.cards-grid {

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "small-1"
    "medium-1"
    "small-2"
    "small-3"
    "small-4"
    "medium-2" 
    "large-1";
    gap: 14px;
    margin-top: 3.5%;
    margin-bottom: 3.5%;
}

.small-1 {

    grid-area: small-1;
}

.small-2 {

    grid-area: small-2;
}

.small-3 {

    grid-area: small-3;
}

.small-4 {

    grid-area: small-4;
}

.medium-1 {

    grid-area: medium-1;
}

.medium-2 {

    grid-area: medium-2;
}

.large-1 {

    grid-area: large-1;
}

.small {

    width: auto;
    height: 310px;
}

.medium {

    width: auto;
    height: 310px;
}

.large {

    width: auto;
    height: 634px;
}

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

    .cards-grid {

        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 
        "small-1 medium-1 medium-1 small-2"
        "medium-2 medium-2 large-1 large-1"
        "small-3 small-4 large-1 large-1";
    }

    .small {

        width: auto;
    }
}