First, move your headings into their sections, so your structure looks more like this:
<main>
<section>
Heading Here
Cards Here
</section>
<section>
Heading Here
Cards Here
</section>
</main>
Then you can do this in a few different ways with CSS. The simplest way is to add a class to each section and then float the first one left with a right margin of 1%, float the second one to the right with a left margin of 1%, and give them a width of 48% each. This will ensure they are 2 columns at all times.
If you’re using more modern techniques, have an autoprefixer installed (or are familiar with writing compatibility for css), and are looking for a responsive solution, I would use flexbox. Here’s how I would do this in SCSS.
.main {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
@media only screen and (min-width: 600px) {
flex-wrap: nowrap;
}
section {
width: calc(100% - 30px);
margin: 15px;
@media only screen and (min-width: 600px) {
width: calc(100% / 2 - 30px);
}
}
}