/* Phone and tablet headings sit midway down the image, in the clear left area. */
@media (max-width: 1023px) {
  .ww-public .ww-public-photo-hero {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    padding-bottom: 28px;
  }
  .ww-public .ww-public-photo-hero > .ww-public-hero-picture {
    grid-column: 1; grid-row: 1; position: relative;
    min-height: 240px; align-self: stretch; overflow: hidden;
  }
  .ww-public .ww-public-photo-hero > .ww-public-hero-picture img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--ww-hero-mobile-position, center);
  }
  .ww-public .ww-public-photo-hero > .ww-public-hero-shade {
    display: block; position: relative; inset: auto; grid-column: 1; grid-row: 1;
    background: linear-gradient(90deg, rgba(20,10,7,.78), rgba(20,10,7,.26) 62%, transparent 85%);
    pointer-events: none;
  }
  .ww-public .ww-public-photo-hero > .ww-public-hero-content { display: contents; }
  .ww-public .ww-public-photo-hero .ww-public-hero-content > h1 {
    grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 3;
    width: 44%; max-width: none; box-sizing: border-box; margin: 0;
    padding: 24px 0 24px 20px; font-size: clamp(18px, 4vw, 28px); line-height: 1.18;
    overflow-wrap: anywhere; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .ww-public .ww-public-photo-hero .ww-public-hero-lead {
    margin: 0; max-width: none; padding: 24px 20px 0; font-size: 15px; line-height: 1.7;
  }
  .ww-public .ww-public-photo-hero .ww-public-hero-content > .flex { margin: 22px 20px 0; gap: 10px; }
  .ww-public .ww-public-photo-hero .ww-public-hero-note { margin: 16px 20px 0; font-size: 12px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ww-public .ww-public-photo-hero > .ww-public-hero-picture { min-height: calc(100vw * 940 / 1672); }
  .ww-public .ww-public-photo-hero .ww-public-hero-content > h1 { padding-inline-start: 32px; }
}