Responsive four card feature section master

Hello to whoever reads this, when i was trying to use flex display on my .layout-grid and then using @media flex-direction of column i found the first card (cyan border) and the fourth card (blue border) to be different size to the two middle cards when changing the screen size to mobile. however it's fixed when i used grid display on .layout-grid class and then setting the @media to grid-template-columns. I'm just not sure what was the issue when i was trying to use flex display. i appreciate any helpful response.