/* Keep copy readable while leaving the product side of each photograph clear. */
.hero .hero-slide--arrival .hero-shade{
  background:linear-gradient(90deg,
    rgba(22,18,15,.78) 0%,
    rgba(22,18,15,.66) 25%,
    rgba(22,18,15,.3) 42%,
    transparent 58%);
}
.hero .hero-slide--access .hero-shade{
  background:linear-gradient(270deg,
    rgba(22,18,15,.77) 0%,
    rgba(22,18,15,.63) 26%,
    rgba(22,18,15,.3) 44%,
    transparent 61%);
}
.showcase-grid>.showcase{
  --tone-rgb:20,16,13;
  --scene-tint:rgba(0,0,0,0);
  --copy-shade:linear-gradient(90deg,
    rgba(var(--tone-rgb),.82) 0%,
    rgba(var(--tone-rgb),.7) 25%,
    rgba(var(--tone-rgb),.4) 40%,
    transparent 55%);
}
.showcase-grid>.showcase--breakfast,
.showcase-grid>.showcase--access{
  --copy-shade:linear-gradient(270deg,
    rgba(var(--tone-rgb),.82) 0%,
    rgba(var(--tone-rgb),.7) 26%,
    rgba(var(--tone-rgb),.38) 43%,
    transparent 58%);
}
.showcase-grid>.showcase--hospad{--tone-rgb:35,26,21;--scene-tint:rgba(112,76,45,.1)}
.showcase-grid>.showcase--access{--tone-rgb:33,25,20;--scene-tint:rgba(79,57,38,.08)}
.showcase-grid>.showcase--miniapp{--tone-rgb:28,39,43;--scene-tint:rgba(35,62,69,.32)}
.showcase-grid>.showcase--breakfast{--tone-rgb:45,36,25;--scene-tint:rgba(129,94,43,.09)}
.showcase-grid>.showcase--safety{--tone-rgb:17,25,40;--scene-tint:rgba(18,29,48,.46)}
.showcase-grid>.showcase--hos-system{--tone-rgb:31,23,44;--scene-tint:rgba(45,32,65,.43)}
.showcase-grid>.showcase::before{
  display:block;
  background:var(--copy-shade),linear-gradient(var(--scene-tint),var(--scene-tint));
  opacity:1;
}
.showcase-grid>.showcase--access::before{display:none}
.showcase-grid>.showcase--access::after{background:var(--copy-shade),linear-gradient(var(--scene-tint),var(--scene-tint))}
@media(max-width:760px){
  .hero .hero-slide--arrival .hero-shade{
    background:linear-gradient(180deg,
      rgba(22,18,15,.78) 0%,
      rgba(22,18,15,.66) 36%,
      transparent 68%);
  }
  .hero .hero-slide--access .hero-shade{
    background:linear-gradient(270deg,
      rgba(22,18,15,.8) 0%,
      rgba(22,18,15,.69) 42%,
      transparent 72%);
  }
  .showcase-grid>.showcase{
    --copy-shade:linear-gradient(180deg,
      rgba(var(--tone-rgb),.8) 0%,
      rgba(var(--tone-rgb),.66) 25%,
      transparent 45%,
      transparent 72%,
      rgba(var(--tone-rgb),.45) 85%,
      rgba(var(--tone-rgb),.76) 100%);
  }
}