.page-title.category-title.above-subcats { margin-bottom: 20px; }
#category_subcats { padding-bottom: 20px; margin: 0 -10px 0 0; list-style: none; display: grid; grid-gap: 10px; grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(170px, 0.25fr)); }
#category_subcats > li { margin: 0; }
#category_subcats > li > a { display: block; height: 100%; min-height: 40px; background-color: #fff; padding: 10px 38px; border: 1px solid #ddd; text-align: center; box-sizing: border-box; position: relative; line-height: 18px; }
#category_subcats > li > a > span { display: block; position: relative; top: 50%; transform: translateY(-50%); }
#category_subcats > li > a:hover { filter: brightness(98%); }
#category_subcats > li > a > img { position: absolute; top: 50%; left: 3px; width: 32px; height: 32px; max-width: 32px; max-height: 32px; transform: translateY(-50%); }
#category_subcats > li.has-children > a::after { content: ""; top: 50%; right: 10px; position: absolute; border: solid rgba(0,0,0,0.16); border-width: 0 3px 3px 0; display: block;
    padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-top: -4px; }

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