.filter-bar--inline {
    position: relative;
    width: 100vw;
    left: -1rem;
    padding-block: 4rem 1.5rem;
}

.filter-category--inline .horizontal-filter {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-inline: 1rem;
    scrollbar-width: none;
}

.filter-category--inline .horizontal-filter li {
    list-style-type: none;
}

.filter-category--inline .filter-option {
    font-family: var(--font-body);
    color: var(--black);
    font-size: 1.125rem;
    line-height: 1.25rem;
}
.filter-category--inline .filter-option:hover {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.filter-category--inline .filter-option.active {
    font-weight: 700;
}

@media (min-width: 600px) {
    .filter-category--inline .filter-option {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .filter-bar--inline {
        width: 100%;
        left: auto;
        padding-block: 6rem 2.5rem;
    }
    
    .filter-category--inline .horizontal-filter {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-inline: 0;
    }
}