.strate-edito-modern {
display: flex;
align-items: center;
gap: 64px;
max-width: 1024px;
margin: 0 auto;
}
.container-content {
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.container-content h2 {
color: var(--Principal, #174A42);
font-family: Pontiac;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: 32px; text-transform: uppercase;
}
.container-content .content p {
color: var(--Vert-standard, #174A42);
font-family: Pontiac;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; margin-bottom: 16px;
}
.container-media {
flex: 1;
width: 50%;
position: relative;
}
.media-container {
position: relative;
overflow: hidden;
background-color: #174A42;
height: 500px;
width: 350px;
bottom: 42px;
}
.media-container img {
display: block;
width: 100%;
height: 100% !important;
object-fit: cover;
}
.strate-edito-video-container {
position: relative;
width: 100%;
height: 100%;
background-color: #174A42;
overflow: hidden;
}
.strate-edito-video-container iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
background-color: transparent;
}
.strate-edito-click-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 10;
background: transparent;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-image: url(//beauterra.com/wp-content/uploads/2025/06/play.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: none;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.play-button-alt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.play-button-alt img {
width: 100%;
height: 100%;
object-fit: contain;
}
.play-button-alt:hover {
transform: translate(-50%, -50%) scale(1.1);
}
#strate_edito_media {
height: 500px;
width: 350px;
}
.strate-edito-carousel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel-container {
position: relative;
width: 100%;
height: 100%;
}
#strate_edito_content{
width: 100%;
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-slide.active {
opacity: 1;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-prev,
.carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5) !important;
color: white;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 5;
padding: 0!important;
border: none !important;
}
.carousel-prev:hover, .carousel-next:hover {
background-color: #174A42 !important;
box-shadow: none !important;
color: white !important;
}
.carousel-prev:focus, .carousel-next:focus {
background-color: #174A42 !important;
box-shadow: none !important;
color: white !important;
}
.carousel-prev {
left: 15px;
}
.carousel-next {
right: 15px;
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background-color: #174A42;
}
.strate-edito-modern[style*="display: flex"] {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.media-container[data-video-loaded="true"] .play-button,
.media-container[data-video-loaded="true"] .play-button-alt {
display: none !important;
}
.PlayButton_module_playButtonWrapper__d1afd73a,
.PlayButton_module_playButton__d1afd73a,
[data-play-button="true"],
.Button_module_button__779846a6,
.shared_module_focusable__fd03e359,
.Button_module_icon__779846a6,
.exclude-global-button-styles,
.Tooltip_module_tooltipContainer__d9b61844,
.TinyProgressBar_module_tinyBar__71fa705b,
div[class*="PlayButton_module"],
div[class*="Button_module"],
div[class*="Tooltip_module"],
div[class*="TinyProgressBar_module"],
button[data-play-button],
.vp-controls,
.vp-overlay,
.vp-center,
.vp-prefs-button,
.vp-sidedock,
.vp-overlay-cell {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
@media (min-width: 1921px) {
.media-container {
height: 500px;
width: 350px;
}
}
@media (min-width: 1281px) and (max-width: 1920px) {
.media-container {
height: 500px;
width: 350px;
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
.media-container {
height: 450px;
width: 100%;
}
}
@media (max-width: 1024px) {
.strate-edito-modern {
flex-direction: column;
gap: 50px;
padding: 76px 16px 57px 16px;
max-width: 100%;
}
#strate_edito_media {
bottom: 0;
width: 100%;
height: 450px !important;
}
.container-content,
.container-media {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 768px) {
.strate-edito-modern {
padding: 36px 16px 57px 16px;
}
.strate-edito-video-container {
height: 100%;
}
}