/* Контейнер */
.seo-city-tags {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* li як обгортка */
.seo-city-tags li {
    display: inline-block;
    margin: 0 15px 10px 0;
}

/* сам тег */
.seo-city-tags li a {
    display: inline-block;
    height: 21px;
    padding: 0 7px 0 14px;
    white-space: nowrap;
    position: relative;

    background: linear-gradient(to bottom, #fed970 0%, #febc4a 100%);
    background-color: #FEC95B;

    color: #963;
    font: bold 12px/20px Arial, Tahoma, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px rgb(255 255 255 / 40%);

    border-top: 1px solid #EDB14A;
    border-bottom: 1px solid #CE922E;
    border-right: 1px solid #DCA03B;

    border-radius: 1px 3px 3px 1px;

    box-shadow: inset 0 1px #fee395, 0 1px 2px rgb(0 0 0 / 21%);
}

/* лівий "хвостик" */
.seo-city-tags li a:before {
    content: '';
    position: absolute;
    top: 5px;
    left: -6px;

    width: 10px;
    height: 10px;

    transform: scale(1, 1.5) rotate(45deg);

    background: linear-gradient(135deg, #fed970 0%, #febc4a 100%);
    background-color: #FEC95B;

    border-left: 1px solid #EDB14A;
    border-bottom: 1px solid #CE922E;

    border-radius: 0 0 0 2px;

    box-shadow: inset 1px 0 #fedb7c, 0 2px 2px -2px rgb(0 0 0 / 33%);
}

/* кружечок */
.seo-city-tags li a:after {
    content: '';
    position: absolute;
    top: 7px;
    left: 1px;

    width: 5px;
    height: 5px;

    background: #FFF;
    border-radius: 50%;
    border: 1px solid #DCA03B;

    box-shadow: 0 1px 0 rgb(255 255 255 / 20%),
                inset 0 1px 1px rgb(0 0 0 / 21%);
}

/* hover (рекомендую додати) */
.seo-city-tags li a:hover {
    filter: brightness(0.95);
}
/* контейнер */
.seo-cities-container {
    margin: 30px 0;              /* зовнішні відступи */
    padding: 15px 20px;          /* внутрішні */

    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    border: 1px solid #e5e5e5;
    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* якщо треба щільніше */
@media (max-width: 768px) {
    .seo-cities-container {
        padding: 10px 12px;
        margin: 20px 0;
    }
}