.container { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-evenly; gap: 7rem; word-break: break-word; } .card { box-shadow: var(--shadow); background-color: var(--main-background-color); border-radius: 2.5rem; padding: 3rem 2rem; display: flex; flex-direction: column; } @media (min-width: 400px) { .card { width: 30ch; } } @media (min-width: 500px) { .card { width: 37ch; } } .card > p { margin: 2rem 0; } .header { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-evenly; } .headerImageContainer { border: 5px solid white; display: inline-block; } /* .headerImage { box-shadow: inset 0 0 10px #000000; } */ .info { border-bottom: var(--card-section-divider); width: 100%; color: var(--text-color); text-align: center; } .info > p { font-weight: 100; font-size: 1.2rem; margin: 0.5rem 0; color: var(--light-text-color); } .info > h3 { margin: 0.5rem 0; } .footer { border-top: var(--card-section-divider); width: 100%; font-size: 1.1rem; margin-top: auto; } .footer > p { margin-top: 2rem; margin-bottom: 0; word-wrap: break-word; } @media (min-width: 60em) { .header { flex-direction: row; } .info { text-align: left; } .footer { font-size: 1.25rem; } }