/* =========================================================
   Shared hero photo collage
   Keeps the two supporting photos consistent and close to
   the corners of the main image across internal pages.
========================================================= */

.about-hero__small-photo,
.programs-hero__small-photo,
.campus-hero__small-photo,
.admission-hero__small-photo {
  z-index: 4;
  width: clamp(190px, 29%, 244px);
  height: auto;
  aspect-ratio: 16 / 9;
  border-width: 5px;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(41, 31, 20, 0.13);
}

.about-hero__small-photo--students,
.programs-hero__small-photo--students,
.campus-hero__small-photo--science,
.admission-hero__small-photo--students {
  top: 8px;
  left: -16px;
}

.about-hero__small-photo--lab,
.programs-hero__small-photo--group,
.campus-hero__small-photo--building,
.admission-hero__small-photo--campus {
  right: -16px;
  bottom: 0;
}

@media (max-width: 680px) {
  .about-hero__small-photo,
  .programs-hero__small-photo,
  .campus-hero__small-photo,
  .admission-hero__small-photo {
    width: clamp(124px, 40%, 148px);
    height: auto;
    aspect-ratio: 16 / 9;
    border-width: 4px;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(41, 31, 20, 0.12);
  }

  .about-hero__small-photo--students,
  .programs-hero__small-photo--students,
  .campus-hero__small-photo--science,
  .admission-hero__small-photo--students {
    top: 8px;
    left: -4px;
  }

  .about-hero__small-photo--lab,
  .programs-hero__small-photo--group,
  .campus-hero__small-photo--building,
  .admission-hero__small-photo--campus {
    right: -4px;
    bottom: 6px;
  }
}