Why my Grid row is not shrinking?

When the viewport width is less than 1480px the Grid layout starts to shrink but the first row's height is not changing. Why is this happening? .card-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px 250px minmax(auto, 420px) 280px 280px minmax(auto, 420px) 280px 280px minmax(auto, 420px) 280px 280px 280px; gap: 20px; padding: 300px 20px 20px 20px; height: 100%; max-width: 1480px; margin: auto; grid-template-areas: "beauty gaming get-fit sign-in" "beauty gaming get-fit blue-pic" "valentines category electronics personal-care" "books books books books" "wireless wireless wireless wireless" "new-toys fitness smartwatch laptops" "international international international international" "popular popular popular popular" "kindle lights pets gaming-merch" "international-kitchen international-kitchen international-kitchen international-kitchen" "international-top international-top international-top international-top" "international-home international-home international-home international-home"; }