Flexbox адаптивные карты

Question

В текущей разметке рабочего стола я пытаюсь добавить медиазапрос размером 800px. В настольной версии у меня есть 2 ряда карт, что в 800pp бп, я хочу 2 столбца по 4 карты в каждом. Как мне этого добиться?

.sub-section .blank-containers {
    width: 250px;
    height: 250px;
    background: rgb(197, 179, 196);
    margin: 5px;
    display: flex;
    justify-content: space-evenly;
    border-radius: 10px;
    border: 1px solid;
}
.sub-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
    border: 1px solid;
}
@media (max-width: 800px) {
    section.sub-section {
        flex-direction: column;
        flex-wrap: wrap;
    }
}

<section class="sub-section">
            <div class="img1">
                <div class="blank-containers"></div>
                <p>image One</p>
            </div>
            <div class="img2">
                <div class="blank-containers"></div>
                <p>image Two</p>
            </div>
            <div class="img3">
                <div class="blank-containers"></div>
                <p>image Three</p>
            </div>
..........
            </div>
        </section>
    </section>

Answer 1

Добавьте общий класс с img1, img2, img3, ....., который будет занимать 50% ширины родительского контейнера. как

.img {
    width: 50%;
    display: flex;
    justify-content: center;
}

А потом

<section class="sub-section">
            <div class="img1 img">
                <div class="blank-containers"></div>
                <p>image One</p>
            </div>
            <div class="img2 img">
                <div class="blank-containers"></div>
                <p>image Two</p>
            </div>
            <div class="img3 img">
                <div class="blank-containers"></div>
                <p>image Three</p>
            </div>
..........
            </div>
        </section>
    </section>

Надеюсь, это сработает для вас.