/* v5.31 — Travel hero
   Make the actual photograph composition shift left, brighten it,
   and retain soft feathering into the green field. */

.travel-page .travel-hero-shade{
  background:linear-gradient(
    90deg,
    #0c2421 0%,
    #0c2421 24%,
    rgba(12,36,33,.97) 31%,
    rgba(12,36,33,.84) 39%,
    rgba(12,36,33,.62) 48%,
    rgba(12,36,33,.40) 57%,
    rgba(12,36,33,.22) 67%,
    rgba(12,36,33,.10) 78%,
    rgba(12,36,33,.03) 89%,
    rgba(12,36,33,0) 100%
  ) !important;
}

.travel-page .travel-hero-photo{
  left:27% !important;
  width:73% !important;

  /* This is what visibly shifts the photo content left. */
  object-position:35% center !important;

  /* Brighter/cleaner photograph without washing it out. */
  filter:brightness(1.22) contrast(1.04) saturate(1.06) !important;

  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.52) 11%,
    rgba(0,0,0,.82) 18%,
    #000 26%,
    #000 92%,
    rgba(0,0,0,.72) 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.52) 11%,
    rgba(0,0,0,.82) 18%,
    #000 26%,
    #000 92%,
    rgba(0,0,0,.72) 96%,
    transparent 100%
  );
}

.travel-page .travel-hero-photo.active{
  opacity:.96 !important;
}

@media(max-width:850px){
  .travel-page .travel-hero-photo{
    left:0 !important;
    width:100% !important;
    object-position:center center !important;
    filter:brightness(1.10) contrast(1.02) !important;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .travel-page .travel-hero-photo.active{
    opacity:.58 !important;
  }
  .travel-page .travel-hero-shade{
    background:linear-gradient(
      0deg,
      #0c2421 8%,
      rgba(12,36,33,.84) 48%,
      rgba(12,36,33,.20) 78%,
      rgba(12,36,33,.04) 100%
    ) !important;
  }
}


/* ============================================================
   v5.32 — POSITION FIX ONLY
   These hero images are DIV background-images, not <img> elements.
   Therefore object-position has no effect. Move the actual photo layer
   and use background-position instead.
   Gradient, brightness, opacity and feathering from v5.31 are unchanged.
   ============================================================ */

.travel-page .travel-hero-photos{
  inset:0 0 0 34% !important;
}

.travel-page .travel-hero-photo{
  inset:0 !important;
  left:0 !important;
  width:100% !important;
  background-size:cover !important;
  background-position:38% center !important;
  object-position:initial !important;
}

/* Avoid unnecessary extra enlargement that can soften the source image. */
.travel-page .travel-hero-photo{
  transform:scale(1.01) !important;
}
.travel-page .travel-hero-photo.active{
  transform:scale(1.025) !important;
}

@media(max-width:850px){
  .travel-page .travel-hero-photos{
    inset:0 !important;
  }
  .travel-page .travel-hero-photo{
    background-position:center center !important;
  }
}