.ss-hero-gallery {
height: 100vh;
height: 100svh;
background-color: var(--wp--preset--color--mariana);
color: #fff;
padding:30px 0 60px 100px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
text-align: center;
}
@media (max-width:640px ){/*mobile*/
  body .ss-hero-gallery {
  padding: 0 30px 50px;
  }
}

.ss-hero-gallery::after {
content: "";
display: block;
position: absolute;
z-index: 2;
top:auto;
bottom:0;
left:0;
right:0;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,.5) );
height: 33vh;
}
.ss-hero-gallery::before {
content: "";
display: block;
position: absolute;
z-index: 2;
bottom:auto;
top:0;
left:0;
right:0;
background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent );
height: 33vh;
}

.ss-hero-gallery__headings {
position: relative;
z-index: 5;
}
.ss-hero-gallery__headings h1,
.ss-hero-gallery__headings h2 {
text-align: left;
color: #fff;
margin: 0;
max-width: 300px;
}
.ss-hero-gallery__headings h1 {
font-size: 1.25rem;
line-height: 1.5em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .1em;
padding-bottom: 0.5em;
opacity: 0;
animation: ss-hero-headings-in 1s both;
animation-delay: 0.5s;
}
.ss-hero-gallery__headings h2 {
font-size: 3rem;
line-height: 1.25em;
text-transform: none;
letter-spacing: .025em;
opacity: 0;
animation: ss-hero-headings-in 1s both;
animation-delay: 0.85s;
}


.header-position-exited .ss-hero-gallery__headings {
opacity: 0;
transition: all 0.5s ease;
pointer-events: none;
transform: translateY(10px);
}


@keyframes ss-hero-headings-in {
  0% {
    opacity: 0;
    transform:translateY(10px);
  }
  100% {
    opacity: 1;
    transform:translateY(0px);
  }
}

.ss-hero-gallery__image {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.ss-hero-gallery__image-img {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: cover;
object-position: center;
}