3 column grid on desktop, 2 column at 768px tablet - css

Question

I am using a CSS grid inside of a CSS grid and I am having trouble getting two rows of three images to change into three rows of two images. It works in my browser when I resize the window, but not when I test in responsive design mode on an ipad width, even when set to landscape. I have tried using #media to set a specific breakpoint, but that doesn't seem to work either. Here is my grid and what I have tried so far:
/*Primary container*/
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3rem;
}
/*Secondary container*/
.section-grid-index {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
column-gap: 1rem;
row-gap: 2rem;
grid-area: 4 / 3 / 10 / 9;
}
#media screen and (min-width:768px) {
section > article {
display: block;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
.article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
I tried the individual media queries one at a time. The best that I can get is a single column of 6 items, each 45% of their original size. I used 45% just in case I had some issue with the box model to see if that is what was throwing things off.