.hero {
min-height: 60vh;
}
.hero-image-container {
height: 70vh;
overflow: hidden;
}
.hero-image-wrapper {
display: flex;
align-items: stretch;
height: 100%;
background: var(--bright);
}
.hero-image, 
.column-image,
.revealing-img {
height: 100%;
object-fit: cover;
}
.hero-image {
flex: 0 0 50%;
min-width: 50%;
}
.item-1 {
flex: 1;
}
.item-1 img,
.item-1 video {
border-radius: var(--corner-s);
}
.item-2 {
flex: 2;
}
.column-image {
width: 100%;
}
.about-wrapper,
.about-summary {
height: 100vh;
background: var(--gradient-cover);
}
.empty-box-about {
height: 50vh;
}
.projects {
position: relative;
padding: var(--size-l) 0;
}
.projects-layer {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.box-projects {
background: var(--white);
z-index: var(--layer);
}
.revealing {
position: relative;
width: 100%;
height: 80vh;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.revealing-img {
position: absolute;
inset: 0;
z-index: var(--layer);
}
.is-revealing {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-image-wrapper.is-js-scroll {
will-change: transform;
}
.revealing-img.is-js-scroll {
opacity: 1;
}
@supports (animation-timeline: view()) {
.hero-image-section {
view-timeline-name: --hero-image-timeline;
view-timeline-axis: block;
}
.hero-image-wrapper {
animation-name: hero-image-anim;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: --hero-image-timeline;
animation-range: cover 25% cover 80%;
}
@keyframes hero-image-anim {
from { transform: translateX(0%); }
to { transform: translateX(-150%); }
}
.revealing {
view-timeline-name: --revealing;
view-timeline-axis: block;
}
.revealing-img {
opacity: 1;
}
.revealing-img:nth-child(1) {
animation: revealing-fade 1ms linear both;
animation-timeline: --revealing;
animation-range: cover 20% cover 32%;
}
.revealing-img:nth-child(2) {
animation: revealing-fade 1ms linear both;
animation-timeline: --revealing;
animation-range: cover 37% cover 50%;
}
.revealing-img:nth-child(3) {
opacity: 1;
}
@keyframes revealing-fade {
from { opacity: 1; }
to { opacity: 0; }
}
}
@media only screen and (max-width: 1080px) {
.columns {
flex-direction: column;
}
.empty-box-about {
height: var(--size-l);
}
.to-right {
width: calc( 100vw - 2 * var(--size-s) );
height: calc( 100vw - 2 * var(--size-s) );
transform: translateX(0) translateY(-33%);
}
}
@media only screen and (max-width: 480px) {
.item-1 img,
.item-1 video {
aspect-ratio: 1/1;
}
}