.main-top-container {container:main-top-container / inline-size;}

.categories-list {--columns:3;list-style:none;display:grid;grid-template-columns:repeat(var(--columns), 1fr);gap:1em;margin-block:2em;}
.categories-list>li {flex:0 0 33%;min-width:0}
.categories-list a {
    font-size:clamp(1.1em,1.6cqw,1.4em);
    font-weight:900;
    font-style:italic;
    display:block;
    align-content: center;
    text-align:center;
    padding:.4em 1em;
    border:1px solid #e6e6e6;box-sizing: border-box;border-radius:6px;height:100%;
    background:#fafafa url('../images/bg-category-item.jpg') no-repeat left center/cover;
    transition:border-color .2s;
    &.sel, &:hover {border-color:#000;}
}
.categories-list a:has(figure) {
    display:grid;grid-template-columns:min(120px,20%) 1fr;gap:10px;align-items:center;
    figure {width:100%;aspect-ratio:1;}
    img {width:100%;height:100%;object-fit:cover;}
}

@container main-top-container (width < 940px) {
    .categories-list {--columns:2;}
}
@container main-top-container (width < 800px) {
    .categories-list {gap:10px;}
}
@container main-top-container (width < 550px) {
    .categories-list a {font-weight:bold;font-size:0.8em;padding:.5em 5px;}
    .categories-list a:has(figure) {display:block;figure {display:none;}}
}