Template:List Box/Styles.css

/* */

.list-box-container { display: flex; flex-wrap: wrap; justify-content: center; }

.list-box { position: relative; flex-grow: 1; flex-basis: calc((100% / 3) - (8px *2) - (10px * 2)); background-color: #1d578b; box-shadow: 2px 2px 2px #0c2236; margin: 8px; }

.list-box:hover { background-color: #153e63; }

@media only screen and (max-width: 1550px) { div.list-box { flex-basis: calc((100% / 2) - (8px *2) - (10px * 2)); } }

@media only screen and (max-width: 1100px) { div.list-box { flex-basis: calc(100% - (8px *2) - (10px * 2)); } }

.list-box img { margin-left: 0.5rem; }

.list-box .list-box-link a { text-align: right; position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-decoration: none; }

.list-box .list-box-link a .list-box-text { position: relative; top: 50%; transform: translateY(-50%); display: block; padding-right: 1rem; font-size: large; }