.city-media img{
    width:100%;
    height:220px;                 /* consistent height like the reference */
    object-fit:cover;
    display:block;
  }

  /* green check badge overlapping bottom center */
  .check-dot{
    position:absolute;
    left:50%;
    bottom: -18px;
    transform: translateX(-50%);
    width:50px; height:50px;
    background: var(--brand);;
    color:#fff;
    display:grid; place-items:center;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    font-size: 0.9rem;
  }

   .check-dot i{ font-size: 1.25rem; color:#fff; } /* slightly larger icon */

  .city-title{
    margin-top: 34px;            /* space for the overlapping dot */
    margin-bottom: .25rem;
    font-weight: 800;
    color: #4a3f2f;              /* warm dark like screenshot */
    font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  }

  .city-sub{
    color:#5b5b5b;
    margin:0;
  }

  /* spacing between rows similar to screenshot */
  .city-card{ max-width: 540px; margin-inline:auto; }

  .city-media img{ transition: transform .35s ease; }
.city-card:hover .city-media img{ transform: translateY(-2px) scale(1.01); }
  .btn-cta{
    background: var(--cta);
    color:#fff;
    width: 120px;

  
  }
  .btn-cta:hover{ background: var(--cta-hover); color:#fff; }