.hero-image-gallery {
position: relative; width: 100vw;
margin-left: calc(-50vw + 50%); height: 864px; 
overflow: hidden;
background-color: #000; } .gallery-base-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; z-index: 1;
} .gallery-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;  clip-path: inset(50% 50% 50% 50%); transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
} .gallery-slide.is-visible { clip-path: inset(0 0 0 0);
} @media (max-width: 1023px) {
.hero-image-gallery {
height: 60vh; }
}  .gallery-overlay-container {
position: absolute;
top: 0; left: 0;
right: 0;
margin: 0 auto; 
width: 100%;
max-width: 1600px; height: 100%; pointer-events: none; 
} .gallery-animated-logo {
position: absolute;
top: 50px; right: 64px; 
width: 240px;
height: 238px; z-index: 10; mix-blend-mode: difference; pointer-events: auto; 
} .gallery-rotating-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: rotateGalleryLogo 20s linear infinite;
} .gallery-central-d {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 74px;
} @keyframes rotateGalleryLogo {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} @media (max-width: 1023px) {
.hero-image-gallery {
height: 60vh; overflow: visible; } .gallery-overlay-container { left: auto;
right: 0;
margin: 0;
max-width: none;
width: 100%;
padding: 0;
} .gallery-animated-logo { top: -60px; 
right: 20px;  width: 120px; 
height: 119px;  mix-blend-mode: difference;
} .gallery-rotating-text {
width: 120px;
height: 119px;
}
.gallery-central-d { width: 42px; 
height: 37px;
}
}