.area-selector {
    --area-selector-label-spacing-vertical: var(--spacing-sm);

    --area-selector-options-gap: 4px;
    --area-selector-options-columns: 2;
}

.area-selector__label {
    display: block;
    margin-bottom: var(--area-selector-label-spacing-vertical);
    white-space: nowrap;

    @media (min-width: 1024px) {
        margin-bottom: 0;
    }
}

.area-selector__options {
    display: grid;
    grid-template-columns: repeat(var(--area-selector-options-columns), auto);
    gap: var(--area-selector-options-gap);

    @media (min-width: 480px) {
        --area-selector-options-columns: 4;
    }
}