/* Art hero with one centred-right object (Thank You page: glass check mark; 404: glass broken link).
   Add phero__panel--mark to a phero__panel--art. Loaded on the Thank You page and the 404 page. */

/* Keep the whole check mark in view (the artwork is anchored to the right, not cropped from the centre). */
.phero__panel--mark .phero__art {
  object-position: 100% 50%;
}

/* Tablet and phone: the artwork becomes a band across the top of the panel and fades into the navy
   behind the text, instead of disappearing under the full-width gradient. */
@media (max-width: 960px) {
  .phero__panel--mark {
    --mark-art: clamp(240px, 68vw, 380px);
    padding-top: calc(var(--mark-art) - 20px);
  }
  .phero__panel--mark .phero__art {
    height: var(--mark-art);
    bottom: auto;
    object-position: 82% 45%;
  }
  .phero__panel--mark::after {
    background: linear-gradient(180deg, rgba(1, 7, 53, 0) 0, rgba(1, 7, 53, 0) calc(var(--mark-art) * 0.62), rgba(1, 7, 53, 0.9) calc(var(--mark-art) - 24px), #010735 var(--mark-art));
  }
}