/**
 * City List — layout only.
 *
 * Colour, type and spacing come from the module's Design controls. Two
 * columns on desktop match a regional "where to buy" city list; phones
 * collapse to one column. Reading order is down the first column, then
 * the second, which is how a balanced CSS column list flows.
 */

.spruce-city-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2em;
    column-fill: balance;
}

.spruce-city-list__item {
    break-inside: avoid;
    margin: 0 0 0.35em;
}

.spruce-city-list__empty {
    margin: 0;
}

@media (max-width: 767px) {
    .spruce-city-list {
        columns: 1;
    }
}