@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); body { margin: 0; font-family: 'Roboto', Arial, Helvetica, sans-serif; } div.container { padding: 10px; display: flex; background-color: #e5e5e5; width: 100vw; height: 100vh; flex-wrap: wrap; } div.card-container { flex: 1 0 calc(100vw / 6); margin-bottom: 10px; display: flex; justify-content: center; } div.card { background-color: white; height: 500px; width: 300px; max-width: 350px; border-radius: 5px; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); } div.card-content { display: flex; flex-direction: column; height: calc(500px / 2); } div.card-content > p { flex-grow: 1; margin: 0; } div.card-content > footer { height: 2em; letter-spacing: 3px; color: #858585 } div.card-content > footer > hr { margin: 0; color: #f5f5f5; } div.card > img { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: inherit; height: calc(500px / 2); object-fit: cover; } div#card-content { padding: 5px; } div#card-content > h2 { margin: 0; font-weight: 500; } div#card-content > p { font-weight: 400; } @media (max-width: 1000px) { div.card-container { flex: 1 0 calc(100vw / 3); } } @media (max-width: 600px) { div.card-container { flex: 1 0 100vw; } }