body { margin: 0px; background-color: #011222; }
header { padding: 0 20px; }
h1 { font-family: ProximaNova-Medium; max-width: 1000px; margin: auto auto;  text-align: center; color: white; letter-spacing: 1.4px; font-size: 42px; }
h2 { font-family: ProximaNova-Medium; max-width: 1000px; margin: auto auto; text-align: center; margin-bottom: 20px; color: white; letter-spacing: 1px; font-size: 32px;}
main { max-width: 1000px; margin: auto auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; }
.cards-container { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem; }
.card { min-height: 240px; display: flex; justify-content: center; align-items: center; background: #f6f6f6; border-radius: 10px; border: black 2px solid; }
.card:hover { background: #dddddd; }
.card > a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.card img { max-width: 180px; height: auto; padding: 20px; }
.card--departments > a { text-decoration: none; }
.card--departments > a > p { font-family: ProximaNova-Medium; letter-spacing: 1.4px; font-size: 28px; font-weight: bold; text-align: center; color: black; padding: 20px; }

@media only screen and (max-width: 768px) {
    .card { min-height: 280px; }
}

@media only screen and (max-width: 480px) {
    .card--departments { min-height: 180px; }
}

/* Utility */
.hide { display: none; }