Portfolio Tiles Not Displaying on Mobile when phone is rotated

Hello, and thank you very much for this support forum.

My website is: https://www.themavenmethod.com

My website is using the Portfolio feature of the Shapely theme. This works great on desktop. I modified it to display as 3 columns on desktop using the following CSS:

@media (min-width: 990px)
#shapely_home_portfolio-6 .col-md-3.masonry-item.project
width: 33%;
position: static !Important;

However on mobile (iPhone 11), I have a couple issues:

  1. On mobile, each tile is displayed in its hover state (silver gradient from top to bottom), shown here:

as opposed to normal (pure black) on desktop. I wonder if this is a clue to the second, more important problem below:

  1. When I rotate the phone from portrait to landscape, the portfolio tiles display perfectly (pure black), in 2 columns. However, when I rotate the phone back to portrait, only 3 tiles are displayed upon resizing, and they are displayed in their hover state, as described in problem #1. In addition, if you look carefully as the phone is being rotated back & forth, there is a quick flickering, and actually looks as though the 3 missing portrait tiles are hidden under the top 3 prominent tiles.

I would appreciate ANY insight you may have into these issues. Thank you kindly.