.outer-city-card{
    padding: 0 0 30px;
    height: 100%;
    transition: padding .3s;
}

.city-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 6px 6px 8px #cccccc, -6px -6px 7px #fefefe;
    height: 100%;
    transition:box-shadow .3s;
}

.city-image-top{
    height: 210px;
    overflow:hidden;
}

.city-image-top img{
    object-fit: cover;
    object-position: center;
    height:100%;
    width: 100%;
    transition: transform ease-out .4s;
    filter:brightness(0.89);
}

.card-title{
    font-size: calc(100% + 0.4rem);
    font-family: var(--cgm);
}

.card-text{
    font-family: var(--cgr);
}

.city-card:hover{
    box-shadow: none;
    outline: 1px solid var(--grey-90);
}

.city-card:hover .city-image-top img{
    transform: scale(1.15);
}


/* ------------------------------------------- Media queries ------------------------------------------- */


/* Very small Devices */
@media (min-width: 300px) {
}

@media (min-width: 470px){

    /* City cards */

    .col-city{
        flex: 0 0 50%;
        max-width: 50%;
    }

    .outer-city-card{
        padding: 0 10px 20px;
    }

    .card-text{
        font-size: calc(0.8rem + 2px);
    }


}

/* Small Devices */
@media (min-width: 576px) {

    /* City cards */

    .outer-city-card{
        padding-bottom: 40px;
    }

}

/* Tablet and up */
@media (min-width: 768px){

    /* City cards */

    .col-city{
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

}

/* Low laptop screen / iPad Pro*/
@media (min-width: 992px){
}

/* Low laptop screen only landscape*/
@media (min-width: 992px) and (orientation: landscape) {
}

/* Very High laptop screen */
@media (min-width: 1400px){

    /* City cards */

    .col-city{
        flex: 0 0 25%;
        max-width: 25%;
    }

    #cities_cards{
        max-width: 90vw;
    }

    .card-text{
        font-size: 13pt;
    }
}

/* Very High laptop screen */
@media (min-width: 1600px) {
}