.cat-table__container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
    @media (min-width: 768px) {
        max-height: initial;
    }
}
.cat-table__header {
    background: var(--primary-50);
    border-radius: var(--radius-8);
    position: relative;
    width: 100%;
    border: none;
    padding: 1rem;
    @media (min-width: 768px) {
        background: var(--primary-gradient-1);
        pointer-events: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    &::after {
        content: "";
        position: absolute;
        mask-size: contain;
        background-color: var(--primary-500);
        top: calc(50% - .75rem);
        right: 1rem;
        height: 1.5rem;
        width: 1.5rem;
        rotate: 90deg;
        transition: rotate 250ms ease;
        @media (min-width: 768px) {
            display: none;
        }
    }
}
.cat-table__products {
    background: var(--gray-100);
    border-bottom-left-radius: var(--radius-8);
    border-bottom-right-radius: var(--radius-8);
    padding: .5rem;
    li {
        background: var(--white);
        border-radius: var(--radius-4);
        padding: 1rem 3.5rem 1rem 1rem;
        position: relative;
        box-shadow: var(--box-shadow-sm);
        &::after {
            content: "";
            position: absolute;
            mask-size: contain;
            background-color: var(--primary-500);
            top: calc(50% - .75rem);
            right: 1rem;
            height: 1.5rem;
            width: 1.5rem;
        }
    }
}
.cat-table {
    &>li {
        @media (min-width: 768px) {
            width: calc((100% / 3) - (2rem / 3));
        }
    }
    svg {
        width: 2rem;
        height: 2rem;
        fill: var(--primary-500);
        @media (min-width: 768px) {
            fill: var(--white);
        }
    }
    h3 {
        font-size: 1.25rem;
        font-weight: 400;
        @container style(--size-medium: var(--medium)) {
            color: var(--white);
        }
    }
    h4 {
        font-family: var(--roboto);
        font-weight: var(--font-weight-600);
    }
    p {
        font-size: .875rem;
        height: 2.625rem;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--gray-300);
    }
    a {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
        text-indent: -999rem;
    }
}
.cat-table__expanded {
    .cat-table__header {
        background: var(--primary-gradient-1);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        &::after {
            rotate: -90deg;
            background-color: var(--white);
        }
    }
    svg {
        fill: var(--white);
    }
    h3 {
        color: var(--white);
    }
    .cat-table__container {
        max-height: initial;
    }
}