/* Compare hub (compare_hub.html): provider cards with their illustration and
   logo, and logos in the starting-price table. */
.cmp-page .cmp-directory-link.cmp2-card { flex-wrap: wrap; align-items: center; padding: 0; overflow: hidden; }
.cmp-page .cmp2-thumb { flex: 0 0 100%; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #F4F5F7; }
.cmp-page .cmp-directory-link.cmp2-card > span { flex: 1 1 0; min-width: 0; padding: 16px 0 16px 20px; }
.cmp-page .cmp-directory-link.cmp2-card > i { margin-right: 20px; }
.cmp-page .cmp2-logo { display: block; width: auto; height: 30px; max-width: 100%; object-fit: contain; object-position: left center; margin: 2px 0 6px; }
.cmp-page .cmp-table .cmp2-logo { height: 30px; max-width: 150px; margin: 0; }
.cmp-page .cmp2-hero-art { margin: 0; align-self: center; }
.cmp-page .cmp2-hero-art img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 640px) {
  .cmp-page .cmp-directory-link.cmp2-card { flex-wrap: nowrap; }
  .cmp-page .cmp2-thumb { flex: 0 0 112px; width: 112px; aspect-ratio: 1 / 1; align-self: stretch; height: auto; min-height: 112px; }
  .cmp-page .cmp-directory-link.cmp2-card > span { padding: 12px 0 12px 12px; }
  .cmp-page .cmp-directory-link.cmp2-card > i { margin-right: 12px; }
}
/* Hero: keep the explaining labels on the picture when the page is wide,
   although the hero column itself is under the photo-notes 700px switch. */
@media (min-width: 1000px) {
  .cmp-page .cmp2-hero-art .rc-photo-notes-frame { width: fit-content; background: none; }
  .cmp-page .cmp2-hero-art .rc-photo-pin { display: none; }
  .cmp-page .cmp2-hero-art .rc-photo-labels { display: block; padding: 0; }
  .cmp-page .cmp2-hero-art .rc-photo-label { position: absolute; translate: -50% -50%; max-width: 220px; border-color: rgba(255,255,255,.28); border-radius: 999px; background: rgba(59,42,140,.8); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 6px 20px rgba(4,34,56,.28); }
}

/* Hub cards: Rentari logo, "vs", then the provider logo. */
.cmp-page .cmp2-us { display: flex; align-items: center; gap: 8px; }
.cmp-page .cmp2-us .cmp2-logo { margin: 0; }
.cmp-page .cmp2-us small { margin: 0; }