body:not(.home) .elementor > .surface-hero:first-child > .section .e-con:has(img) {
position: static;
}
body:not(.home) .elementor > .surface-hero:first-child > .section img {
display: block;
position: relative;
z-index: 2;
mask-image: linear-gradient(#000 0 0), var(--helen-wave-c-mask);
mask-size: 100% calc(100% - var(--wave-height)), 100vw calc(var(--wave-height) + 1px);
mask-position: 0 0, right 0 bottom 0;
mask-repeat: no-repeat;
}
@media (min-width: 1025px) {
body:not(.home) .elementor > .surface-hero:first-child > .section img:not(.portrait-end) {
position: absolute; inset-block-start: auto;
inset-block-end: calc(-1 * var(--wave-height));
inset-inline-end: calc(50% - 50vw);
inline-size: auto;
block-size: calc(100% + var(--wave-height) - var(--header-padding-hero) * 2 - var(--header-logo-size)); max-inline-size: var(--helen-hero-free, calc(100vw - max(var(--space-l), (100vw - var(--helen-content-width)) / 2) - var(--column-narrow-width) - var(--space-l)));
max-block-size: none;
object-fit: contain;
object-position: right bottom;
}
} @media (max-width: 1024px) {
body:not(.home) .elementor > .surface-hero:first-child > .section:has(img) {
padding-block-end: 0;
} body:not(.home) .elementor > .surface-hero:first-child > .section img:not(.portrait-end) {
inline-size: auto;
block-size: auto;
max-inline-size: min(calc(100% + var(--space-l)), 680px);
max-block-size: 520px;
margin-block: var(--space-m) calc(-1 * var(--wave-height));
margin-inline: auto calc(-1 * var(--space-l));
}
}
@media (max-width: 767px) {
body:not(.home) .elementor > .surface-hero:first-child > .section img:not(.portrait-end) {
max-inline-size: min(calc(100% + var(--space-xs)), 680px);
max-block-size: 420px;
margin-inline: auto calc(-1 * var(--space-xs));
}
} body:not(.home) .elementor > .surface-hero:first-child > .section img.portrait-end {
--helen-hero-end: calc(max(var(--space-l), (100vw - var(--helen-content-width)) / 2) + var(--space-m) + var(--space-2xs));
position: absolute;
inset-block: auto calc(-1 * var(--wave-height));
inset-inline: auto calc(50% - 50vw + var(--helen-hero-end));
inline-size: auto;
block-size: calc(var(--hero-portrait-width) * 1.259);
max-inline-size: none;
margin: 0;
mask-position: 0 0, right calc(-1 * var(--helen-hero-end)) bottom 0;
}
@media (max-width: 1024px) {
body:not(.home) .elementor > .surface-hero:first-child > .section img.portrait-end {
--helen-hero-end: calc(var(--space-l) + var(--space-m) + var(--space-2xs));
position: relative;
inset: auto;
block-size: calc(var(--hero-portrait-width) * var(--hero-portrait-tablet-factor) * 1.259);
margin-block: var(--space-m) calc(-1 * var(--wave-height));
margin-inline: auto calc(var(--space-m) + var(--space-2xs));
}
} @media (min-width: 768px) and (max-width: 1024px) {
body:not(.home) .elementor > .surface-hero:first-child > .section img.portrait-end {
position: absolute;
inset-block: auto calc(-1 * var(--wave-height));
inset-inline: auto calc(50% - 50vw + var(--helen-hero-end));
margin: 0;
}
}
@media (max-width: 767px) {
body:not(.home) .elementor > .surface-hero:first-child > .section img.portrait-end {
block-size: calc(min(var(--hero-portrait-max-width), 100vw - 2 * var(--space-xs)) * 1.259);
margin-inline: auto;
mask-position: 0 0, 50% 100%;
}
}