.card { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-width: 20rem; } .card-header img { width: 100%; height: 14rem; object-fit: cover; border-radius: 1rem; } .card-body { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 250px; height: --webkit-fill-available; } .card-body { text-align: left; } .article h3 { text-align: center; } .author { float:right; } .tag { background: var(--color-text); border-radius: 0.25em; margin: 0; color: var(--color-background); padding: 2px 10px; text-transform: uppercase; cursor: pointer; } .tag-teal { background-color: #47bcd4; } .tag-purple { background-color: #5e76bf; } .tag-pink { background-color: #cd5b9f; } .author img { border-radius: 50%; width: 4rem; height: 4rem; /* margin-right: 2rem; */ } .user-info p { margin: 0; } .user-info p small { color: var(--color-secondary); } div.author { text-align: right; } div.tags { width: 100%; text-align: center; } @media (max-width: 1000px) { .card { min-width: 14rem; } }