.hero-split { display: flex; width: 100%; height: 100vh; overflow: hidden; } .hero-panel { position: relative; flex: 1; overflow: hidden; cursor: pointer; } .hero-panel .panel-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.8s ease; z-index: 1; } .hero-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; z-index: 2; } .hero-panel:hover .panel-photo { opacity: 0; } .hero-panel:hover video { opacity: 1; } .hero-panel .panel-content { position: absolute; bottom: 60px; left: 40px; z-index: 3; color: #fff; font-family: 'Cormorant Garamond', serif; } .hero-panel .panel-content h2 { font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 300; letter-spacing: 0.08em; margin: 0 0 8px; } .hero-panel .panel-content span { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; } .hero-panel.panel-ville::after { content: ''; position: absolute; top: 10%; right: 0; width: 1px; height: 80%; background: rgba(255,255,255,0.25); z-index: 4; }
Esprit Ville

Parister & Bloom House

Esprit Mer

Roz Marine, Alliance & Emeria