/* Figma: 2805:1245 (Alumni), 2805:1256 (News), 2820:1310 (Contact),
 * 2820:1285 (FAQ). The artwork keeps its 1920 x 377 proportions: smaller
 * screens crop its sides and screens wider than 1920px crop its bottom edge.
 * The mobile height follows Program/Experts. */
.page-hero {
  --hero-height: 276px;
  position: relative;
  display: flex;
  align-items: center;
  height: var(--hero-height);
  overflow: hidden;
  background: #1d1b44;
  font-family: 'DM Sans', sans-serif;
  font-variation-settings: 'opsz' 14;
}

.page-hero__artwork {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, calc(var(--hero-height) * 1920 / 377));
  aspect-ratio: 1920 / 377;
  transform: translateX(-50%);
}

.page-hero__image {
  position: absolute;
  max-width: none;
  transform-origin: top left;
}

/* Inverse of Figma's imageTransform, including the slight photo rotation.
 * The generated design-context percentages omit its off-diagonal terms. */
.page-hero--alumni .page-hero__image {
  width: 107.648364%;
  height: 365.401215%;
  left: 9.810260%;
  top: -125.433792%;
  transform: matrix(1, 0.01166355, -0.01166355, 1, 0, 0);
}

.page-hero--news .page-hero__image {
  width: 113.266343%;
  height: 384.564765%;
  left: 0.185250%;
  top: -130.216337%;
  transform: matrix(1, 0.06478393, -0.06478393, 1, 0, 0);
}

/* These Figma assets already contain the transformed image fill. */
.page-hero--contact .page-hero__image,
.page-hero--faq .page-hero__image {
  width: 100%;
  height: 100%;
}

.page-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(77.903699deg, #1d1b44 37.191%, rgba(57, 55, 109, 0.2) 103.98%);
}

/* Mobile exports contain the visible photo crop at 2x resolution. */
@media (max-width: 767px) {
  .page-hero .page-hero__image {
    width: 767px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .page-hero {
    --hero-height: 377px;
  }
}