.filters {
    border-right: 1px solid var(--color-border-primary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 768px) {
    .filters {
        display: none;
    }
}

.filters > .header {
    color: var(--color-text-secondary)
}

.tag-filter {
    border-radius: 999px;
    padding: 0.25rem 1rem 0.25rem 1rem;
    border: none;
    background: none;
    /* USES BODY-S */
    font-family: var(--font-sans);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-medium);
    line-height: var(--line-height-medium);
}

.tag--blue {
    color: var(--indigo-700);
    background-color: var(--indigo-100);
}

.tag--green {
    color: var(--green-700);
    background-color: var(--green-100);
}

.tag--teal {
    color: var(--teal-700);
    background-color: var(--teal-100);
}

.tag--purple {
    color: var(--purple-700);
    background-color: var(--purple-100);
}

.tag--orange {
    color: var(--sand-700);
    background-color: var(--sand-100);
}

.tag--grey {
    color: var(--grey-700);
    background-color: var(--grey-200);
}