Vorlage:RubrikContainer/style.css

.category-tiles { display: flex; flex-wrap: wrap; }

.category-tiles .category-container { flex: 1 0 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 {

   margin-left: 0.25em;
   margin-right: 0.25em;
   margin-bottom: 0.5em;
   box-shadow: none;
   border: 1px solid var( --border-color-base );
   border-radius: 0.5rem;
   box-sizing: border-box;
   overflow: hidden;

}

.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;
   padding: 0.5em 1.5rem;

}

.category-container.no-content h2 {

   text-align: center;
   background-color: var( --background-color-overlay--lighter );
   position: absolute;
   z-index: 1;
   transition: transform 0.2s;
   font-size: 1rem;
   padding: 0;
   bottom: 0;
   left: 0;
   right: 0;

}

.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:hover h2 { transform: scale(1.05); }

.category-container.no-content h2 a {

   color: var( --color-base--emphasized );
   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%;
   border-radius: 8px;

}

.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%; } }