.mk-sub > span {
  background-color: rgb(24 79 193 / 76%);
  color: #fff;
}

.mk-compare img[src$="/ford-focus-lateral.webp"],
.mk-compare img[src$="/vw-golf-lateral.webp"] {
  clip-path: inset(12% 0 0);
}

@media (max-width: 1023px) {
  .mk-hero::after {
    background: linear-gradient(0deg, #f5f7fb 0, transparent 44px),
                linear-gradient(90deg, #fff 39%, rgb(255 255 255 / 94%) 44%,
                  rgb(255 255 255 / 75%) 49%, rgb(255 255 255 / 50%) 55%,
                  rgb(255 255 255 / 25%) 61%, rgb(255 255 255 / 6%) 68%, transparent 73%);
  }
}

@media (min-width: 1024px) {
  .mk-model-hero { padding-bottom: 56px; }
  .mk-model-hero::after {
    --form-right: min(calc(100% - 32px), calc(50% + 608px));
    background:
      linear-gradient(to right, transparent calc(var(--form-right) - 180px),
        #fff var(--form-right)),
      linear-gradient(0deg, #f5f7fb 0, rgb(245 247 251 / 0%) 110px),
      linear-gradient(90deg, #fff, rgb(255 255 255 / 88%) 26%, transparent 50%);
  }
}

/* Keep the full scene above the overlapping search form on model pages. */
@media (min-width: 1024px) {
  .mk-model-hero .mk-hero-img {
    left: 56%;
    right: auto;
    transform: translateX(-50%) scale(1.1);
    transform-origin: center top;
    width: auto;
    max-width: 100%;
    height: calc(100% - 84px);
    object-fit: contain;
    object-position: right top;
    mask-image: linear-gradient(to right, transparent, #000 34%, #000 90%, transparent),
                linear-gradient(to bottom, #000 76%, transparent);
    mask-composite: intersect;
  }
}
@media (max-width: 1023px) {
  .mk-model-hero .mk-hero-img {
    height: calc(100% - 28px);
    object-fit: contain;
    object-position: right top;
  }
}

.mk-compare .cmp-photo {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.mk-compare .cmp-photo .cmp-brand {
  position: absolute;
  top: 0;
  left: 6px;
  width: 88px;
  height: 52px;
  object-fit: contain;
  object-position: left top;
  filter: grayscale(1);
  opacity: .1;
}
.mk-compare .cmp-photo-link { display: block; border-radius: 8px; }
.mk-compare .cmp-detail-link { display: inline-flex; align-items: center; gap: 6px; }
.mk-compare .cmp-detail-link .ti { color: #1e5bff; font-size: 18px; }
.mk-compare .cmp-detail-link:hover { color: #1e5bff; }
.mk-compare a:focus-visible { outline: 2px solid #1e5bff; outline-offset: 4px; }

.mk-compare:has(.auto-badge) .cmp-photo .auto-badge { top: -15px; left: auto; right: 6px; }
.mk-compare:has(.auto-badge) .cmp-photo .cmp-brand { top: -15px; }
.mk-compare:has(.auto-badge) .auto-badge img { width: 22px; height: 22px; filter: none; }
@media (max-width: 1023px) {
  .mk-compare:has(.auto-badge) .mk-cmp-tabs { margin-bottom: 25px; }
  .mk-compare:has(.auto-badge) .cmp-photo .cmp-brand { top: -20px; object-position: left center; }
  .mk-compare:has(.auto-badge) .cmp-photo .auto-badge { top: -9px; }
}
@media (max-width: 639px) {
  .mk-compare:has(.auto-badge) .auto-badge img { width: 20px; height: 20px; }
  .mk-compare:has(.auto-badge) .cmp-photo .auto-badge { top: -7px; }
}
.mk-compare .cmp-eye { width: 18px; height: 18px; flex: none; color: #1e5bff; }