#facet {
    h3 {
        margin-block: 0;
        text-transform: capitalize;
    }

    .radio {
        display: grid;
        gap: 0.5rem;

        .radio-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;

            .option {
                padding: 0.375rem 0.75rem;
                color: white;
                border-color: white;
            }
        }
    }

    .distance-filter {
        display: grid;
        gap: 0.5rem;

        .geo-icon {
            inline-size: 1em;
            block-size: 1em;
            margin-inline-start: auto;
        }
    }

    .type-filter {
        display: grid;
        gap: 0.5rem;

        .nature--recommended { font-weight: bold }
    }

    .other-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        h3 { inline-size: 100% }
        .field { flex: 1 1 40% }
    }

    button { justify-self: center }

    @media (min-width: 50em) {
        position: sticky;
        inset-block-start: 1rem;
        inset-inline: auto;
        inline-size: auto;
        max-inline-size: 25rem;
        block-size: fit-content;
        align-self: start;
        box-shadow: none;
        display: grid;
        padding: 1rem;
        popover: none;
        translate: none;
    }
}