.cityBox {flex:1;max-width:260px;min-width:220px;position:relative;margin: 3px;overflow:hidden;background:#ffffff14;backdrop-filter:blur(1px);margin-bottom:20px;box-shadow:0 1px 2px 2px #f1f1f1, 0 5px 25px 5px #00000008;border-radius:var(--largeradius);}
.cityBox- {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:center;
    flex:1;
    gap:14px;
}

.cityBox-.-page--cites--boxes {
    justify-content:center
}

.-page--container-sidebars .cityBox-.-page--cites--boxes .cityBox {
    max-width:250px;
    min-width:248px;
}

.cityBox:nth-child(3n + 2) {top:40px;}
.v--title .P-content {margin-bottom:35px;}
.vi-city {
    padding:45px 20px;
    transition:380ms all ease;
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    position:relative;
    display:flex;
    justify-content:center;
} 

.-defualt-object--center .cityBox:nth-child(3n + 2) {
    top:0;
}

.-page--container-sidebars .cityBox-.-page--cites--boxes .cityBox:nth-child(3n + 2) {
    top:auto;
}

.cityBox:hover {
    background:white;
}.cityBox:before {
        background-repeat:no-repeat;
        position:absolute;
        width:100%;
        height:100%;
        opacity:0.1;
}

.cityBox-icon,.-bg-cityBox-fixed {
    position:relative;
    align-items:center;
    overflow:hidden;
}

.cityBox-icon {
     position:relative;
     display:flex;
     align-items:center;
     justify-content:center;
     transition:380ms all ease;
     z-index:5;
     color:var(--primary-text);
     font-size:48px;
}

.cityBox:hover .cityBox-icon {
    color:var(--uicolor);
}

.hoverg .cityBox-icon {
    top:-55px;
}



.cityBox:hover .cityBox-icon:before {
    height:100%
}


.cityBox-icon>i {
    font-weight:300
} 
.city-info {
    position:relative;
    padding-top:45px;
    transition:all .5s ease;
    text-align:center;
}.city-info>a {
    font-weight:500;
    font-size:19px;
    transition:180ms all ease;
}