.container-cards-list { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .card { background-color: $light; display: flex; padding: 1rem; box-shadow: 1px 1px 2px $grey; border-radius: 2px; text-decoration: none; flex-direction: column; justify-content: space-between; } .bg-b { background-color: royalblue; } @media (max-width: 1200px) { .container-cards-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .container-cards-list { grid-template-columns: repeat(2, 1fr); } }