.city-card.city-card-photo{padding:0;min-height:245px;overflow:hidden;display:flex;flex-direction:column;background:#fff}.city-card-photo .city-photo{position:relative;display:block;width:100%;height:138px;background:linear-gradient(135deg,#fff7d8,#f0f1f2);overflow:hidden}.city-card-photo .city-photo img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .3s ease,transform .35s ease}.city-card-photo:hover .city-photo img{transform:scale(1.055)}.city-card-photo .city-photo.loaded img{opacity:1}.city-card-photo .city-photo-shade{position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.34));opacity:0;transition:opacity .25s}.city-card-photo .city-photo.loaded .city-photo-shade{opacity:1}.city-card-photo .city-photo-credit{position:absolute;right:8px;bottom:6px;color:#fff;font-size:9px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:.86}.city-card-photo .city-card-copy{display:block;padding:17px 22px 20px}.city-card-photo .city-card-copy strong{font-size:20px}.city-card-photo .city-card-copy>span{display:block;font-size:13px;color:var(--muted);margin-top:4px;padding-right:18px}.city-card-photo>b{right:18px;bottom:17px}.city-card-photo .photo-unavailable:after{content:"⌖";position:absolute;inset:0;display:grid;place-items:center;font-size:32px;color:#b38a12}@media(max-width:820px){.city-card.city-card-photo{min-height:220px}.city-card-photo .city-photo{height:125px}}

/* Mobile city cards match the compact two-column national portal layout. */
@media(max-width:590px){
  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .city-card.city-card-photo{position:relative;display:block;min-height:0;aspect-ratio:.68;border-radius:16px;background:#eef0f1}
  .city-card-photo .city-photo{position:absolute;inset:0;width:100%;height:100%}
  .city-card-photo .city-photo-shade{height:48%;opacity:1;background:linear-gradient(transparent,rgba(0,0,0,.78))}
  .city-card-photo .city-photo-credit{top:7px;right:7px;bottom:auto;font-size:8px}
  .city-card-photo .city-card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:12px}
  .city-card-photo .city-card-copy strong{color:#fff;font-size:16px;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.72)}
  .city-card-photo .city-card-copy>span,.city-card-photo>b{display:none}
  .city-card-photo .photo-unavailable:after{font-size:24px}
}