.category-container { position:relative;display:flex;flex-direction:column; }
.category-container .image-container { position:relative;overflow:hidden;width:100%;display:flex;justify-content: center;align-items: center;aspect-ratio: 5/4;margin-bottom:14px; }
.category-container .image-container img {
   position:absolute;width: 100%; height: 100%;z-index:1;opacity:0.4;object-fit: cover;
   transition: transform 0.5s ease;
}
.category-container .image-container.grayscale img { filter:grayscale(100%); }
/*
.category-container .image-container .overlay { position:absolute;inset:0;z-index:2;opacity:0.8; }
*/
.category-container a { text-decoration: none; }
.category-container a:hover img {transform: scale(1.05);  }


.category-container .image-container.overlay-none { background-color:transparent; }
.category-container .image-container.overlay-none img { opacity:1; }
.category-container .image-container.overlay-red { background-color:var(--red); }
.category-container .image-container.overlay-black { background-color:black; }
.category-container .image-container.overlay-gray { background-color:#DDDDDD; }
.category-container .image-container.overlay-darkgray { background-color:#999999; }
.category-container .image-container.overlay-white { background-color:white; }

.category-container .image-container .text { z-index:3;align-self:center;text-align:center;font-size:20px;font-weight: bold;}
.category-container .image-container .overlay-text-red { color:var(--red); }
.category-container .image-container .overlay-text-black { color:black; }
.category-container .image-container .overlay-text-white { color:white; }

@media screen and (max-width: 780px) {
   .category-container {
     max-width: 400px; margin: 0 auto;
   }
}

/*
@media screen and (max-width: 1220px) { }
@media screen and (max-width: 880px) { }
@media screen and (max-width: 400px) { }
*/