Missing padding on archive pages

Hi, as you can see here https://epicveganeats.com/recipes/summer/, I'm trying to achieve archive pages with 3 columns, except for mobile, where there should be 2 columns.

To style the individual items of the archives, I applied a Content Template and for the 2 columns on mobile, I used some CSS that was recommended to me earlier:

@media (max-width: 1024px) {
    .generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100 {
        width: calc(50% - 10px);
        padding-left: 20px;
    }
}

Things are looking mostly fine, but in the range between 768px and 1200px browser width, there is no padding on the left side. Any suggestions how I can fix this missing padding?

Thanks, Lars