/* Keep the existing wide images and layout above the phone breakpoint. */
.mobile-square-picture {
  display: contents;
}

.mobile-square-picture > source {
  display: none;
}

.mobile-square-homepage-photo {
  display: none;
}

@media (max-width: 720px) {
  .mobile-square-picture > img,
  .mobile-square-homepage-photo > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Show the full square photograph before the copy, not behind it. */
  .hero.mobile-square-hero {
    display: block !important;
    min-height: 0 !important;
    background: #f7faf9 !important;
  }

  .mobile-square-hero .hero-media,
  .mobile-square-homepage-photo {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

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

  .mobile-square-hero .hero-content {
    position: relative !important;
    padding: 24px 0 32px !important;
  }

  .mobile-square-hero .hero-message {
    width: 100%;
    margin: 0;
  }

  /* The homepage hero is a photo only; its old copy container is empty. */
  .mobile-square-homepage .hero-content {
    display: none !important;
  }
}