Template:ZW Nav/Styles.css

/* */

.zw-nav { display: grid;

background-color: #17568c; border: 1px solid #426787; margin-bottom: 1rem; }

.zw-nav__section { position: relative; border: 2px solid #426787; padding: 1rem; text-align: center; transition: 300ms; } .zw-nav__section:hover { background-color: #214b71; } .zw-nav__section--active, .zw-nav__section--active:hover { background-color: #1b3d5e; }

.zw-nav__section-link a { position: absolute; top: 0; left: 0; height: 100%; width: 100%;

background-image: none; opacity: 0; z-index: 2; }

.zw-nav__section--header { grid-column: 1/-1;

border: 2px solid #426787; padding: 0.5rem; text-align: center; }

.zw-nav__section--header img { max-width: 450px; width: 100%; height: auto; }

.zw-nav__section-text { color: #f4f26b; font-weight: bold; margin-top: 0.5rem; } .zw-nav__section:hover .zw-nav__section-text { text-decoration: underline; } .zw-nav__section--active .zw-nav__section-text { color: #e6e6e6; } .zw-nav__section--active:hover .zw-nav__section-text { text-decoration: none; }

@media (min-width: 30.625rem) { .zw-nav { grid-template-columns: repeat(2, 1fr) } }

@media (min-width: 53.125rem) { .zw-nav { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 68.75rem) { .zw-nav { grid-template-columns: repeat(6, 1fr); } }