.categories-grid {grid-template-columns: 45.5% calc(54.5% - var(--gap-2));}
.wrap-categories {
    width:100%;box-sizing: border-box;
    position: relative;display:grid;gap: var(--gap-2);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.large-part {grid-row: 1 / 3;}
.l1 {grid-column-start: 4;}
.l2 {grid-column-start: 5;}
.l3 {grid-column-start: 6;}
.mascot-categories {
    grid-row: 1/3;grid-column: 1/3;
    position:relative;
}
.mascot-categories .mascot {bottom:0;object-fit: contain;}
.mascot-categories .mascot-background {
    border-radius: var(--b-radius2);
    position:absolute;
}
.scrollable {
    overflow: auto;white-space: nowrap;width:100%;
}
.scrollable::-webkit-scrollbar {width: 0;}
.scrollable::-webkit-scrollbar-track {background: transparent;}
.scrollable::-webkit-scrollbar-thumb {background: transparent;border-radius: 0;}
.category-card {
    width: 100%;position:relative;display: inline-block;
    margin-right: 0;
}

.category-card .over-cover {
    background-color: var(--s8-bg);display:flex;
    flex-direction: column;gap: var(--gap-1);align-items: center;
    justify-content: center;transition: background-color 0.3s ease-in-out;
}
.category-card .over-cover .s3 {text-transform: uppercase;}
.category-card:hover .over-cover {
    background-color: var(--s4-bg);border-radius: var(--b-radius2);
}
#all-categories {padding-top:12vh;}



@media (max-width: 1000px) {
    .wrap-categories {grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--gap-1);}
    .large-part {display: none;}

    .category-card {width:100%;}
}