Template:Main Page Games/Styles.css

/* */

.gamenav { margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; }

.gamenav__game { display: inline-block; position: relative; width: 100%; height: 125px;

font-size: 0; margin-bottom: 0.875rem; overflow: hidden; text-shadow: 2px 2px 4px #000000; }

.gamenav__game a { position: absolute; width: 100%; height: 100%;

background-color: rgba(0, 0, 0, 0.6); box-sizing: border-box; color: rgba(255, 255, 255, 0.9); font-size: 1.5rem; line-height: 1.75rem; padding: 1.75rem; text-align: left; text-decoration: none; transition: background-color 0.3s; z-index: 1; }

.gamenav__game-img { min-width: 100%; min-height: 100%; width: auto; height: auto; vertical-align: middle; transition: transform 0.3s; }

.gamenav__game a:hover, .gamenav__game-year:hover ~ a { background-color: rgba(0,0,0, 0.3); } .gamenav__game a:hover ~ img, .gamenav__game-year:hover ~ img { transform: scale(1.05); }

.gamenav__game-year { position: absolute; bottom: 12px; right: 16px; z-index: 10;

color: rgba(255, 255, 255, 0.9); cursor: pointer; font-size: 0.75rem; }

.gamenav__spin-off-family { margin-top: 1rem; }

@media (min-width: 850px) { .gamenav__game { margin: 0.125rem; text-align: center; width: auto; }	.gamenav__game a { display: flex; flex-direction: column; justify-content: center; padding: 0 0.25rem; text-align: center; }	.gamenav__game-year { bottom: 0.5em; left: 1em; text-align: left; }	.gamenav__spin-off-family { margin-top: 2.5rem; } }