.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.square-blocks-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* This will space out the blocks evenly */
    width: 100%;
}

.square-block {
    flex: 1 1 48%; /* Assuming two blocks should take about half the width of the container minus some margin */
    margin: 10px; /* Adjust spacing between blocks */
    text-align: center; /* Center the text under the image */
}

@media (min-width: 768px) {
    .square-block {
        flex: 1 1 23%; /* Adjusts to fit four blocks in a row on wider screens */
    }
}