contact form not responsive

I want the form to occupy 2 columns for wide screens and a single column for mobile screens, so I used CSS grids to style the form. However the form is broken on mobile, all the fields get smashed together. I added a media query
@media (max-width: 767px) {
.wpcf7-form.cf7-style {
width: 100%!important;
}
}
specifically, the entire form is wrapped in <div class=”grid-cont”> and then the left column is further wrapped in <div class=”grid-item-1″> and the right column wrapped in <div class=”grid-item-2″>
The CSS is as follows:
div.grid-cont {display: grid;
grid-template-columns: 48% 48%;
grid-template-rows: auto;
grid-column-gap: 15px;
margin-top: 20px;}

div.grid-item-1 { grid-column: auto;
grid-row: auto;
}
div.grid-item-2 { grid-column: auto;
grid-row: auto;
}

Any help / suggestions on how to make the form 2 columns for desktop and single column for mobile?

On older websites, I have used “floats” to make 2 columns responsive, but I hate to think that I need to revert to this older method….
Thanks!

The page I need help with: [log in to see the link]