Add a common class with img1, img2, img3, ….. which will take 50% of the parent container width.
like

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

And then

<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>

Hope it will work for you.

In my current desktop markup, I’m trying to add a 800px media query. In the desktop version, I have 2 rows of cards, that in the 800px bp, I want 2 columns of 4 cards each. How can I achieve this?

.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>