Steps to reproduce the issue

@media (min-width: 768px)
.container-bottom-a, .container-bottom-b, .container-top-a, .container-top-b {
    grid-template-columns: repeat(auto-fit,minmax(24%,1fr));
}
@media (min-width: 576px)
.container-bottom-a, .container-bottom-b, .container-top-a, .container-top-b {
    grid-template-columns: 1fr 1fr;
}

Actual result

If the site width is greater than 768, the one module in the position is displayed in 100% of the width. But if the width is less than 768, the one module is output in 50% of the width.

Expected result

The 50% behavior should be displayed if the number of modules is greater than one. But if the module is one, it should be displayed in full width. Moreover, the opposite is displayed. With a small site width, the module has a width of 50%, and with a huge site width, one module has a width of 100%. Where it is logical that it was the opposite.