#sub-categories {
    .item {
        color: inherit;

        img {
            aspect-ratio: 1;
        }
    }
}

#filters {
    details {
        border: thin solid var(--bs-border-color);
        padding: .5rem;

        summary {
            font-weight: bold;
            font-size: 1.1em;

            &::after {
                content: '+';
                margin-inline-start: auto
            }
        }

        &[open] {
            summary::after {
                content: '-';
            }
        }
    }

    input[type=checkbox] {
        &:checked {
            background-color: var(--main-color);

            & + .form-check-label {
                color: var(--second-color);
            }
        }
    }

    .backdrop {
        display: none;
    }
}

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}

.slider-input {
    background: var(--bs-light);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .slider {
        height: .5rem;
        background: var(--main-color);
        border-radius: .5rem;
        position: relative;
        anchor-scope: --slider-input;
        anchor-name: --slider-input;

        .start, .end {
            position: fixed;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            position-anchor: --slider-input;
            top: calc(anchor(--slider-input center) - .5rem);
            background: inherit;
            cursor: pointer;

            &.start {
                inset-inline-start: anchor(--slider-input start);
            }

            &.end {
                inset-inline-end: anchor(--slider-input end);
            }
        }
    }
}

@media (max-width: 768px) {
    #filters {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2022;
        transition: 300ms;
        padding: 0;

        .backdrop {
            background-color: #00000059;
            position: absolute;
            inset: 0;
            z-index: -2;
        }

        .wrapper {
            background: var(--bs-white);
            width: 80%;
            box-shadow: 0 0 .5em 0 #00000059;
            padding: .5rem;
            height: 100%;
            overflow: auto;
        }

        &.show {
            display: block;

            .backdrop {
                display: block;
            }
        }

        @starting-style {
            inset-inline-start: -100%;
        }
    }
}