.centered40,
.centered50,
.centered60,
.centered70,
.centered80,
.centered90 {
    min-width: 300px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.centered70 {
    width: 70%;
}

.centered60 {
    width: 60%;
}

.centered50 {
    width: 50%;
}

.centered40 {
    width: 40%;
}

/* Consecutive .centered40 blocks flow two per row, spread across the full width, and a
   longer run wraps onto further rows. A lone one keeps the centered layout above. */
.centered40:has(+ .centered40),
.centered40 + .centered40 {
    float: left;
    width: 49%;
    min-width: 0;
    margin: 0 0.5%;
}

/* whatever follows a run starts below it */
.centered40:is(:has(+ .centered40), .centered40 + .centered40):not(:has(+ .centered40)) + * {
    clear: both;
}