/* Align skyline bottoms and the visible centers of the unchanged lettering. */
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > a {
  background-image: none;
  background-color: #000;
}
body:is(.home-page, .city-page) .city-grid.city-grid-graphic .city-card-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: contrast(1.2);
  transform: translateY(calc(75% - var(--skyline-bottom) / 941 * 100%));
  clip-path: inset(0 0 calc((941 - var(--skyline-bottom)) / 941 * 100%) 0);
}
/* Align each skyline's visible bottom to 75% of its card. Source rows were
   measured from the approved 941px-tall artwork; artwork size is unchanged. */
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > .dallas { --skyline-bottom: 712; }
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > .austin { --skyline-bottom: 657; }
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > .houston { --skyline-bottom: 666; }
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > .san-antonio { --skyline-bottom: 656; --city-label-size: 9.1cqw; }
body:is(.home-page, .city-page) .city-grid.city-grid-graphic > a > strong {
  inset: 88.5% 4% auto;
  width: 92%;
  font-size: var(--city-label-size, 11.5cqw);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  transform: translateY(-50%);
}