#homecats { margin: 10px auto 30px auto; }
#homecats .subcats { padding: 0; list-style: none; margin: 0 auto; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(162px, 0.25fr)); }
#homecats .subcats li { padding: 0; padding-top: 100%; overflow: hidden; border-radius: 5px; position: relative;
    box-shadow: 0 5px 8px rgba(0,0,0,0.14); text-align: center; display: block; box-sizing: border-box; opacity: 0.85; }
#homecats .subcats li .cat-link { display: block; width: 100%; height: 100%; position: absolute; bottom: 0; }
#homecats .subcats li .cat-name { display: block; padding: 8px 10px; color: #111; font-size: 1rem; line-height: 1.3rem; font-weight: bold; position: relative;
    top: 100%; transform: translateY(-100%); background-color: rgba(255,255,255,0.85); text-transform: lowercase; }
#homecats .subcats li .cat-name:first-letter { text-transform: uppercase; }
#homecats .subcats li .cat-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 100%; height: 100%; width: 100%; max-height: 100%; object-fit: cover; color: transparent; }
#homecats .subcats li:hover { opacity: 1; box-shadow: 1px 6px 9px rgba(0,0,0,0.14); }
#homecats .subcats li:hover .cat-name { color: #146191; }

@media only screen and (max-width: 1023px) {
    #homecats .subcats { grid-template-columns: repeat(auto-fit, minmax(156px, 0.33fr)); }
}
@media only screen and (max-width: 570px) {
    #homecats .subcats { grid-template-columns: repeat(auto-fit, minmax(140px, 0.5fr)); }
}
@media only screen and (max-width: 360px) {
    #homecats .subcats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}