/* Fade the photograph's own boundary, including contain-size letterboxing. */
.hero-slide{display:flex;align-items:center;justify-content:flex-end}
.hero-slide img{
  display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.015) 5%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.61) 30%,rgba(0,0,0,.87) 42%,#000 55%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 3%,#000 9%,#000 91%,rgba(0,0,0,.8) 97%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.015) 5%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.61) 30%,rgba(0,0,0,.87) 42%,#000 55%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 3%,#000 9%,#000 91%,rgba(0,0,0,.8) 97%,transparent 100%);
  mask-composite:intersect;
}
.hero-visual::after{display:none}
@media(max-width:700px){
  .hero-slide{justify-content:center}
  .hero-slide img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 3%,#000 9%,#000 91%,rgba(0,0,0,.75) 97%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 4%,#000 12%,#000 88%,rgba(0,0,0,.8) 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 3%,#000 9%,#000 91%,rgba(0,0,0,.75) 97%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 4%,#000 12%,#000 88%,rgba(0,0,0,.8) 96%,transparent 100%);
    object-position:center;
  }
  .hero-fade{background:none}
}