Template:RubricContainer/style.css

.category-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }

.category-tiles .category-container { flex: 1 1 32%; }

.category-container { background: var(--background-color-framed); border: 1px solid var(--border-color-base--darker); box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02); position: relative; }

.category-container.no-content { box-shadow: none; border: 1px solid var( --border-color-base ); border-radius: var(--border-radius--medium); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column-reverse; }

.category-container h2 { margin: 0; border: none; font-size: 1.3em; background-color: var(--background-color-framed--hover); font-family: sans-serif; line-height: 1.4; font-weight: bold; }

.category-container.no-content h2 { text-align: center; background-color: var( --background-color-overlay--lighter ); transition: transform 0.2s; font-size: 1rem; }

.category-container.no-content h2 span { width: 100%; align-items: center; display: flex; justify-content: space-around; }

.category-container.no-content h2 span img { display: none; }

.category-container.no-content h2 a { color: rgba(255,255,255,0.87); padding: 0.25rem; padding-top: 0.5rem; width: 100%; box-sizing: border-box; }

.category-container > div { display: flex; height: 100%; }

.category-container > div .category-content-container { padding: 0.5em; margin: 1rem; flex-basis: 75%; }

.category-container.no-image > div .category-content-container { flex-basis: 100%; }

.category-container div .category-image-container { overflow: hidden; flex-basis: 25%; display: flex; align-items: stretch; }

.category-container.no-content div .category-image-container { flex-basis: 100%; }

.category-container div .category-image-container a img { object-fit: cover; height: 100%; transform-origin: center; transition: transform 0.2s; width: 100%; max-height: 125px; min-height: 100%; object-position: center; }

.category-container div .category-image-container a .image-contain { object-fit: contain; }

.category-container div .category-image-container a { width: 100%; }

.category-container.no-content:hover div a img, .category-container div a img:hover { transform: scale(1.05); }

html.skin-citizen-dark body.skin-citizen .category-container.content { border: solid var( --background-color-framed ); }

@media screen and (max-width: 850px) {	.category-container.no-content { flex-basis: 49%; }

.category-container > div { flex-wrap: wrap-reverse }

.category-container > div .category-content-container { flex-basis: auto; margin-left: 1em; margin-right: 1em; }

.category-container div .category-image-container { flex-basis: 100%; } }

@media screen and (max-width: 560px) {	.category-container.no-content { flex-basis: 100%; } }