.shero{position:relative;overflow:hidden;background:var(--ink);
  margin-top:calc(var(--nav) * -1)}
.shero-foto{position:relative;z-index:0}
.shero-foto img{display:block;width:100%;height:auto}
.shero-tx{position:absolute;left:0;right:0;top:0;z-index:3;
  height:min(100svh,100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) var(--hero-pie);
  pointer-events:none}
.shero-tx > *{pointer-events:auto}
.shero-tx > .wrap{width:100%}
.shero-tx::before{content:'';position:absolute;left:0;right:0;
  top:0;bottom:calc(var(--hero-pie) * -1.4);z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,12,0) 0%,
    rgba(8,10,12,.12) 34%,rgba(8,10,12,.46) 58%,rgba(8,10,12,.74) 78%,
    rgba(8,10,12,.74) 88%,rgba(8,10,12,0) 100%)}
.shero-tx .mn{color:rgba(255,255,255,.72)}
.shero-tx h1{color:#fff;font-size:var(--hero-h1);
  max-width:24ch;margin-top:var(--hero-a1)}
.shero-tx .lead{color:rgba(255,255,255,.88);margin-top:var(--hero-a2);
  line-height:1.45;
  max-width:46ch;text-shadow:0 1px 20px rgba(8,10,12,.5)}
.shero-foto.pending{aspect-ratio:4/3}
.shero-foto .pend{position:absolute;inset:0;display:none;align-items:center;
  justify-content:center;text-align:center;padding:16px;
  font-family:var(--u);font-weight:500;font-size:15px;line-height:1.7;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 14px,
    transparent 14px 28px)}
.shero-foto.pending .pend{display:flex}
.shero-foto.pending img{display:none}
@media(min-width:861px){
  .shero{height:100svh;min-height:540px}
  .shero-foto{position:absolute;inset:0}
  .shero-foto img{width:100%;height:100%;
    object-fit:cover;object-position:50% 50%}
  .shero-tx{height:100%}
  .shero-tx::before{bottom:0;
    background:linear-gradient(180deg,rgba(8,10,12,0) 0%,
      rgba(8,10,12,.12) 34%,rgba(8,10,12,.46) 58%,rgba(8,10,12,.74) 78%,
      rgba(8,10,12,.74) 100%)}
}
@media(max-width:860px){
  .shero{background:var(--white)}
  .shero-tx{position:relative;top:auto;height:auto;display:block;
    padding:clamp(26px,5vh,44px) var(--pad) clamp(34px,6vh,56px)}
  .shero-tx::before{display:none}
  .shero-tx .mn{color:var(--ink3);text-shadow:none}
  .shero-tx h1{color:var(--ink);text-shadow:none;max-width:none}
  .shero-tx .lead{color:var(--ink2);text-shadow:none;
    font-size:16px;max-width:none}
}