/* The photographed hero replaces the table scene on phones in both home pages. */
.home-photo .hero-gathering {
  display: none;
}

@media (width < 48rem) {
  .home-photo .hero-sufra.hero-door {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    background: var(--sand);
  }

  .home-photo .hero-door .sufra-field {
    display: none;
  }

  .home-photo .hero-door .table-scene .dish {
    animation: none;
  }

  .home-photo .hero-gathering,
  .home-photo .hero-gathering img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .home-photo .hero-gathering img {
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* A 4:5 photo is 125vw high; the doorway covers its lower 40%. */
  .home-photo .hero-door .sufra-invitation {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-block-start: calc(-125vw * .4);
  }

  .home-photo .hero-door .door-shell {
    width: 81%;
    margin-inline: auto;
  }

  /* The warm outline remains visible over the photograph in either theme. */
  .home-photo .hero-door .door-halo > span {
    border-color: var(--stone);
  }
}