2 Product Columns targeting Tablet View

At the moment desktop view has one horizontal row with  (4) individual products. Mobile view has one column with each product stacked.

 I would like to target the widths between 767px - 1045px and have my (4) products distributed evenly between two columns.

Site: https://sartori7.squarespace.com/lapel-accessories

PW: 1237

This is a great tutorial:

https://insidethesquare.co/squarespace-tutorials/two-column-mobile

I've adapted the code for your usage:

@media only screen and (min-width:768px) and (max-width:1045px) {
 .products .list-grid {
   display: flex; 
   flex-wrap: wrap; 
   justify-content: space-between; 
 }
 .products .grid-item {
   width: 48%;
 }
}

@Ziggy

The grid was not distributed between 2 columns but the size was reduced to 48%.

@ccxwood Here's your solution. Add the code under Website > Website Tools > Custom CSS. Also make sure you add the code after your previous code and delete the code you added from the previous comment. 

@media screen and (min-width: 768px) and (max-width: 1045px) {
section[data-section-id="64bef7269fbf9701d8fd6edc"] {
	min-height: auto !important;
	height: auto !important;
}
.products.collection-content-wrapper .list-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}