/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2020 Nguyen Huu Phuoc */ .cover { align-items: center; color: var(--text-color); display: flex; flex-direction: column; justify-content: flex-start; padding: 1rem; text-decoration: none; width: 50%; } .cover__name { font-weight: normal; margin: 0; padding-top: 0.5rem; text-align: center; } @media (min-width: 640px) { .cover { width: 25%; } } @media (min-width: 768px) { .cover { width: 20%; } } @media (min-width: 1024px) { .cover { width: 16.666666666666668%; } }