.hero {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
height: 100svh;
min-height: 100vh;
min-height: 100svh;
width: 100%;
background-color: transparent;
z-index: 1;
padding: var(--padding-top, 0) var(--padding-right, 0) var(--padding-bottom, 0) var(--padding-left, 0);
}
@media screen and (max-width: 40em) {
.hero.interiors-child-hero {
position: relative;
background-color: transparent;
z-index: 1;
display: block;
height: auto;
min-height: auto;
width: 100%;
padding: 0;
margin-top: 7rem;
}
}
.hero.align-center {
align-items: center;
}
.hero.align-top {
align-items: start;
}
.hero.align-bottom {
align-items: end;
}
.hero.justify-left {
justify-content: start;
}
.hero .justify-center {
justify-content: center;
}
.hero .justify-right {
justify-content: end;
}
.wp-admin .hero {
height: 100%;
min-height: 100%;
padding: 0;
}
.wp-admin .hero figure.image-holder img {
object-fit: contain;
position: relative;
}
.wp-admin .hero .content-container {
position: absolute;
padding: var(--padding-top, 0) var(--padding-right, 0) var(--padding-bottom, 0) var(--padding-left, 0);
z-index: 999;
width: 90%;
}
.wp-admin .hero .content-container .block-editor-block-list__layout {
width: 100%;
}
.wp-admin .hero .image-holder {
position: relative;
z-index: 0;
} .hero h1 {
position: absolute;
margin: auto;
color: #fff;
padding: 0;
text-shadow: 0 0.2em 1.3em oklab(0 0 0 / 0.7);
letter-spacing: 0.15em;
font-size: clamp(3.5em, 8vmin, 8em);
} @media screen and (max-width: 40em) {
.hero.interiors-child-hero h1 {
position: relative;
color: #444;
text-align: center;
line-height: 1.3;
width: 94%;
margin: auto;
letter-spacing: 0.05em;
font-size: clamp(2em, 5vmin, 5em);
padding: 1.5em 0 0.2em;
text-shadow: none;
}
} .is-root-container .hero {
width: auto;
}
.hero .content-container { display: flex;
width: 100%; justify-content: center;
}
.hero .acf-innerblocks-container {
width: 90%; }
.hero .image-holder {
display: block;
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: -1;
overflow: hidden;
}
@media screen and (max-width: 40em) {
.hero.interiors-child-hero .image-holder {
display: block;
position: relative;
margin: 0;
width: 100%;
}
.hero.interiors-child-hero .image-holder[style*="--padding:"] {
padding-top: var(--padding);
background-color: #c3c0bb;
}
.hero.interiors-child-hero .image-holder[style*="--padding:"] img {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.hero-bg-color {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: var(--hero-bg, #efefef);
z-index: -1;
}
#editor .hero-bg-color {
height: 100%;
min-height: 600px;
}
.hero.has-overlay .image-holder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--overlay-color);
opacity: var(--overlay-visibility);
z-index: 1;
}
.hero figure.image-holder img {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
font-family: "object-fit: cover;";
}
@media screen and (max-width: 40em) {
.hero.interiors-child-hero figure.image-holder img {
display: block;
height: auto;
width: 100%;
position: relative;
}
}
.hero .scroll-indicator {
display: block;
position: absolute;
top: auto;
right: 0;
left: 0;
bottom: 4%;
text-align: center;
margin: 0 auto;
color: #ffffffb2;
opacity: 1;
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.735em;
transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 40em) {
.hero.interiors-child-hero .scroll-indicator {
display: none;
}
}
.scrolled .scroll-indicator {
opacity: 0;
}
.hide-scroll-indicator .scroll-indicator,
.is-root-container .hide-scroll-indicator .scroll-indicator {
display: none;
}
.acf-field.acf-field-64764d85fe598 .acf-label {
margin-top: 11px;
}