.city-card {
  background-color: #000;
}

.city-card .Button {
    display: none;
}

.phone .city-card .Button {
    display: none;
}

.city-card img {
    float: left;
    transition: opacity 0.5s ease-in-out;
}

.city-card:hover {
  cursor: pointer;
}

.city-card:hover img {
    opacity: 0.5;
}

.city-card .Button:hover {
  background-color: var(--color-primary);
}



.city-card .city-name {
    padding-bottom:16px;
    text-shadow: 1px 1px 1px #000
}

.city-card:hover .city-name {
    transition: font-size 0.3s;
    font-size: 24px !important;
    animation: fade-in-bottom ease-in 0.3s forwards;
}

.city-card .city-name {
    transition: font-size 0.3s;
    animation: fade-out-bottom ease-out 0.3s forwards;
}

.city-card:hover .Button {
  display:unset;
  animation: fade-in-bottom ease-in 0.3s forwards;

}

.city-card .Button {
  display:none;
  animation: fade-out-bottom ease-out 0.3s forwards;

}

@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translatey(15px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}

@keyframes fade-out-bottom {
  from {

    transform: translatey(0);
  }
  to {

    transform: translatey(15px);
  }
}