/* Keep low-resolution photos close to their real pixel size so they don't turn soft.
   The sources are crops of the client's mockups and phone screenshots; no larger originals exist. */

/* Community "Voices": the four photos are wide strips (about 3:1). Show them in that shape
   instead of cropping a slice and stretching it to 1.6:1. */
#app .tiles.mini .tile img { aspect-ratio: 3 / 1; }

@media (min-width: 901px) {
  /* Travel bottom banner: the photo covers the right ~60% at about its real size and fades
     into the dark panel behind the text, instead of being stretched across the whole page. */
  #app .wide-banner .wide-photo {
    left: auto; right: 0; width: 60%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }
  .wide-banner::before { background: linear-gradient(90deg, rgba(16,24,10,.55) 0%, rgba(16,24,10,.25) 50%, rgba(16,24,10,.3) 100%); }

  /* Community bottom banner: photo on the left behind the script, the sign-up card on a solid panel */
  .join { background: var(--forest-dark, #1f2d1a); }
  #app .join .join-photo {
    right: auto; left: 0; width: 60%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30%);
    mask-image: linear-gradient(270deg, transparent 0, #000 30%);
  }
  .join::before { background: linear-gradient(90deg, rgba(20,24,12,.55), rgba(20,24,12,.15) 45%, rgba(20,24,12,0) 60%); }
}