.video-hero {
position: relative;
width: 100%;
overflow: hidden;
}
.video-hero__media {
display: none;
width: 100%;
height: auto;
object-fit: cover;
}
/* Desktop : 16:9, visible à partir de 750px */
.video-hero__media--desktop {
aspect-ratio: 16 / 9;
}
/* Mobile : 4:5, visible en dessous de 750px */
.video-hero__media--mobile {
aspect-ratio: 4 / 5;
}
@media (min-width: 750px) {
.video-hero__media--desktop {
display: block;
}
}
@media (max-width: 749.98px) {
.video-hero__media--mobile {
display: block;
}
}
.video-hero__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
color: #fff;
}
.video-hero__heading {
font-size: 2rem;
margin: 0 0 1rem;
font-weight: 400;
}
.video-hero__text {
max-width: 500px;
margin: 0 0 1.5rem;
}
.video-hero__button {
display: inline-block;
padding: 0.75rem 1.75rem;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.8rem;
}
.video-hero__button:hover {
background: #fff;
color: #111;
}
