.category-wrapper {display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:20px;
}
.category-thumbnail {
    height:auto;
    text-align: center;
    flex: 1;
    min-width: calc(25% - 20px);
    border: 1px solid #e8e8e8;
    border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
}
@media screen and (max-width: 900px) {
    .category-thumbnail {min-width: calc(33% - 20px); }
    .category-thumbnail span { font-size: 0.9em;}
}
@media screen and (max-width: 600px) {
    .category-thumbnail {min-width: calc(50% - 20px); }
    .category-thumbnail span { font-size: 0.9em;}
}
@media screen and (max-width: 400px) {
    .category-thumbnail {
        min-width: calc(100%); }
    .category-thumbnail img { width: 100px; }
    .category-thumbnail a {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #990111;
        border-radius: 0px 2px 2px 0;
    }
    .category-thumbnail span { font-size: 0.9em; border-top:0px !important; width: 100%;}
}


.category-thumbnail-image { display:block;}

.category-thumbnail span {
    display: block;
    padding: 10px;
    background: #990111;
    color: #fff;
    border-top: 1px solid #e8e8e8;
}
.category-thumbnail span:hover { background: #77010e; text-decoration: none; }
.category-thumbnail a span:after {
    font-size: 10px;
    content: '\e608';
    font-family: 'luma-icons';
    margin: 0 10.5px;
    vertical-align: text-bottom;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}
.category-thumbnail a:hover { text-decoration: none; }