.m27_usp_with_image {
position: relative;
padding: clamp(70px, 6vw, 110px) 0 clamp(80px, 7vw, 130px);
color: #fff;
overflow-x: clip;
z-index: 0;
} .m27_bg {
position: absolute;
inset: 0;
background: var(--hs-dark);
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 80px),
50% 100%,
0 calc(100% - 80px)
);
z-index: -1;
}
.m27_grid {
display: grid; grid-template-columns: 50vw minmax(0, 1fr);
gap: 0;
align-items: center;
min-height: clamp(440px, 30vw, 600px);
}
.m27_image_col {
position: relative;
align-self: stretch; padding-right: clamp(80px, 8vw, 160px);
overflow: visible;
}
.m27_content_col {
min-width: 0;
padding-top: 20px;
padding-bottom: 20px;
} .m27_image_wrap { position: absolute;
bottom: 0;
left: 0;
right: clamp(80px, 8vw, 160px); height: calc(100% + clamp(70px, 6vw, 110px) + clamp(40px, 3.5vw, 70px));
z-index: 2;
} .m27_image_frame {
position: absolute;
inset: 24px -24px -24px 24px;
border: 1px solid var(--hs-gold);
pointer-events: none;
z-index: 1;
}
.m27_image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.m27_image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .m27_headline {
color: #fff !important;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.15;
margin: 0 0 32px;
max-width: 540px;
}
.m27_headline em {
font-style: italic;
font-family: var(--hs-font-display);
font-weight: 600;
}
.m27_text {
color: rgba(255,255,255,0.88);
margin-bottom: 40px;
max-width: 590px;
} .m27_content_col .hs_btn_ghost {
border-color: rgba(255,255,255,0.3);
color: #fff;
}
.m27_content_col .hs_btn_ghost::before {
background: #fff;
}
.m27_content_col .hs_btn_ghost:hover {
color: var(--hs-dark);
border-color: #fff;
} .m27_usps {
list-style: none;
margin: 60px 0 0;
padding: 0;
display: grid;
gap: 18px;
}
.m27_usp {
display: grid;
grid-template-columns: 86px 1fr;
gap: 32px;
align-items: center;
}
.m27_usp_icon {
width: 86px;
height: 86px;
border-radius: 50%; background: var(--hs-gold);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.m27_usp_icon img { width: 47px; height: 47px; object-fit: contain; filter: brightness(0) invert(1); }
.m27_usp_icon svg { width: 47px; height: 47px; display: block; color: #fff; }
.m27_usp_body { min-width: 0; }
.m27_usp_title {
display: block;
color: #fff;
font-family: var(--hs-font-body);
font-weight: 600;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.03em;
margin-bottom: 2px;
}
.m27_usp_text {
display: block;
color: rgba(255,255,255,0.85);
font-family: var(--hs-font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.03em;
}
@media (max-width: 1199.98px) {
.m27_grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
.m27_image_col, .m27_content_col { grid-column: 1; }
.m27_image_col { padding-right: 0; }
.m27_image_wrap {
position: relative;
top: auto;
right: auto;
height: auto;
width: 100%;
min-height: 400px;
max-height: 600px;
}
.m27_content_col {
padding: clamp(40px, 5vw, 60px) var(--hs-container-px);
}
.m27_bg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px)); }
.m27_usp { grid-template-columns: 60px 1fr; gap: 18px; }
.m27_usp_icon { width: 60px; height: 60px; }
.m27_usp_icon img,
.m27_usp_icon svg { width: 34px; height: 34px; }
}
@supports (aspect-ratio: 1) {
@media (max-width: 1199.98px) {
.m27_image_wrap {
min-height: 0;
aspect-ratio: 16 / 9;
max-height: none;
}
}
}