.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;

    > :last-child { margin-inline-start: auto }

    .filters__language {
        border: 1px solid var(--orange-lighter);
        border-radius: 5px;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;

        label {
            padding: 0.25rem 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;

            svg { height: 1rem }
        }
    }

    .filter-label {
        max-inline-size: 100%;
        border: 1px solid;
        border-radius: 5px;
        padding: 0.25rem 0.5rem;
        display: inline-grid;
        grid-auto-flow: column;
        align-items: center;
        gap: 0.5rem;
        overflow-wrap: anywhere;

        &:hover, &:focus-visible {
            background-color: white;
            color: black;
        }
    }

    .character-list {
        display: grid;
        gap: 0.5rem;

        @container page (min-width: 70em) { grid-template-columns: 1fr 1fr }
    }
}