.city-card-container{width:100%;margin:20px auto;position:relative;overflow:hidden;border-radius:10px}.city-card{width:100%;height:100%;position:relative}.city-card .image{min-height:300px;object-fit:cover;display:block}.city-card .image,.city-overlay{width:100%;height:100%;border-radius:10px}.city-overlay{position:absolute;top:0;left:0;background-color:transparent;transition:background-color .5s ease;z-index:1}.city-name{position:absolute;bottom:20px;left:0;right:0;color:#fff;text-align:center;font-family:Arial,sans-serif;font-size:20px;font-weight:700;transition:all .5s cubic-bezier(.25,.46,.45,.94);z-index:2}.city-card-container:hover .city-name{top:50%;bottom:auto;transform:translateY(-50%);background:none}.city-card-container:hover .city-overlay{background-color:rgba(0,0,0,.5)}