Template:Main Page Categories/Styles.css

/* */

.main-page-categories { margin-top: 2.5rem; }

.main-page-category-item { position: relative; height: 75px;

margin-top: 1rem; max-width: 20rem; }

.main-page-category-item-image { position: absolute; bottom: 20px;

filter: drop-shadow(2px 2px 2px black); }

.main-page-category-item-image img { height: auto; width: auto; }

.main-page-category-item-caption a { height: 40px; display: flex; align-items: center; justify-content: right;

background: #17568c; color: white; box-shadow: 1px 1px 2px #000; font-size: 1.125rem; font-weight: 500; padding-right: 0.5rem; text-decoration: none; transition: 0.3s; }

.main-page-category-item-caption a:hover, .main-page-category-item-image:hover ~ .main-page-category-item-caption a { background: #153e63; color: #e6e6e6; }

@media (min-width: 850px) { .main-page-categories { display: flex; flex-wrap: wrap; justify-content: center; }	.main-page-category-item { width: 12.5rem; margin-right: 1.25rem; margin-top: 0; } }