.protected-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--cream);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.protected-photo-hero {
  aspect-ratio: 4 / 3;
}

.protected-photo-portrait {
  aspect-ratio: 3 / 4;
}

.protected-photo-feature {
  aspect-ratio: 4 / 3;
}

.photo-home-seated {
  background-image:
    url("/static/images/boy-home-seated.jpg"),
    url("/static/images/boy-red-arsenal.png"),
    url("/static/images/hero-boy.jpg");
  background-position: center 38%;
}

.photo-red {
  background-image:
    url("/static/images/boy-red-arsenal.png"),
    url("/static/images/hero-boy.jpg");
  background-position: center;
}

.photo-portrait {
  background-image:
    url("/static/images/boy-portrait.png"),
    url("/static/images/brain-art.jpg");
  background-position: center 34%;
}

.photo-prayer {
  background-image:
    url("/static/images/boy-prayer.png"),
    url("/static/images/dream-tunnel.jpg");
  background-position: center 42%;
}

@media (max-width: 767px) {
  .protected-photo-feature {
    aspect-ratio: 3 / 4;
  }
}