/* Approved yellow hero artwork supplied by the client. */
.approved-hero-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

.approved-hero-media::before,
.approved-hero-media::after {
  content: none !important;
  display: none !important;
}

.approved-hero-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: min(100%, 680px) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(390px, 56vw, 690px) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* The approved images replace every generated drawing inside secondary heroes. */
main > .page-hero > .brand-section-motif,
main > .hero.section-dark > .brand-section-motif {
  display: none !important;
}

.certifications-reference-hero__mark.approved-hero-media,
.blog-reference-hero__mark.approved-hero-media,
.contact-reference-hero__mark.approved-hero-media,
.specialized-reference-mark.approved-hero-media {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.specialized-reference-mark .approved-hero-art {
  width: min(100%, 760px) !important;
}

.corporate-training-reference-hero .approved-hero-art,
.contact-reference-hero .approved-hero-art {
  width: min(100%, 610px) !important;
}

.blog-reference-hero .approved-hero-art,
.certifications-reference-hero .approved-hero-art {
  width: min(100%, 620px) !important;
}

.partners-hero .approved-hero-art {
  width: min(100%, 580px) !important;
}

/* About has a different legacy hero structure, so the image is integrated here. */
.approved-about-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(34px, 6vw, 90px);
  align-items: center;
  text-align: right !important;
}

.approved-about-hero > :not(.approved-about-hero__media) {
  grid-column: 1;
}

.approved-about-hero__media {
  grid-column: 2;
  grid-row: 1 / -1;
}

.approved-about-hero__media .approved-hero-art {
  width: min(100%, 560px) !important;
  max-height: 650px !important;
}

@media (max-width: 900px) {
  .approved-hero-art {
    width: min(82vw, 520px) !important;
    max-height: 520px !important;
  }

  .approved-about-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    text-align: center !important;
  }

  .approved-about-hero > :not(.approved-about-hero__media),
  .approved-about-hero__media {
    grid-column: 1;
  }

  .approved-about-hero__media {
    grid-row: 1;
    margin-bottom: 24px;
  }
}

@media (max-width: 560px) {
  .approved-hero-art,
  .approved-about-hero__media .approved-hero-art {
    width: min(78vw, 360px) !important;
    max-height: 390px !important;
  }
}