.mewi-block {
--mewi-cyan: #02aeee;
--mewi-blue: #2272b1;
--mewi-ink: #1a1a1a;
--mewi-text: #333333;
--mewi-white: #ffffff;
--mewi-tint: #f2f2f2;
--mewi-tint-hero: #f9f9f9;
--mewi-cyan-soft: rgb(2 174 238 / 0.18);
--mewi-focus: var(--mewi-blue);
--mewi-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--mewi-step-1: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
--mewi-step-lead: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
--mewi-step-h2: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
--mewi-step-h1: clamp(2.4rem, 1.5rem + 3.6vw, 3.9rem);
--mewi-gap: clamp(1rem, 2.5vw, 3rem);
--mewi-pad-y: clamp(3rem, 5vw, 6rem);
box-sizing: border-box;
width: 100%;
max-width: none;
margin-block: 0;
padding-block: var(--mewi-pad-y);
color: var(--mewi-text);
background: var(--mewi-white);
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: var(--mewi-step-0);
font-weight: 400;
line-height: 1.65;
font-feature-settings: "kern", "liga", "calt";
}
.mewi-block *,
.mewi-block *::before,
.mewi-block *::after {
box-sizing: inherit;
} .mewi-block.is-dark {
--mewi-focus: var(--mewi-cyan);
background: var(--mewi-ink);
color: var(--mewi-white);
}
.mewi-block.is-tint {
background: var(--mewi-tint);
} .mewi-wrap {
width: 90%;
max-width: 1600px;
margin-inline: auto;
} .mewi-block :is(h1, h2, h3, h4) {
color: inherit;
font-family: inherit;
letter-spacing: normal;
text-transform: none;
}
.mewi-block h2 {
margin: 0 0 1.25rem;
font-size: var(--mewi-step-h2);
font-weight: 400;
line-height: 1.2;
}
.mewi-block h3 {
margin: 0 0 0.35rem;
font-size: var(--mewi-step-1);
font-weight: 500;
line-height: 1.2;
}
.mewi-block p {
margin: 0 0 1.25rem;
}
.mewi-block ul {
margin: 0 0 1.25rem;
padding-left: 1.5em;
line-height: 1.35;
}
.mewi-block li {
margin-bottom: 0.6rem;
}
.mewi-block .mewi-lead {
color: var(--mewi-blue);
font-size: var(--mewi-step-lead);
font-style: italic;
line-height: 1.35;
}
.mewi-block.is-dark .mewi-lead {
color: var(--mewi-cyan);
}
.mewi-prose > :last-child {
margin-bottom: 0;
} .mewi-btns {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
width: 100%;
margin-top: 0.5rem;
}
.mewi-btns--stack {
flex-direction: column;
align-items: flex-start;
}
.mewi-btns--stretch {
flex-direction: column;
align-items: stretch;
}
.mewi-block .mewi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3em;
min-height: 44px;
padding: 0.9rem 1.8rem;
border: 1px solid var(--mewi-cyan);
border-radius: 50px;
background: var(--mewi-cyan);
color: var(--mewi-ink);
font-size: var(--mewi-step-0);
line-height: 1.1;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.mewi-block .mewi-btn:hover {
border-color: var(--mewi-blue);
background: var(--mewi-blue);
color: var(--mewi-white);
}
.mewi-block .mewi-btn--dark {
border-color: var(--mewi-ink);
background: var(--mewi-ink);
color: var(--mewi-white);
}
.mewi-block.is-dark .mewi-btn--dark {
border-color: var(--mewi-white);
}
.mewi-block .mewi-btn--dark:hover {
border-color: var(--mewi-cyan);
background: var(--mewi-cyan);
color: var(--mewi-ink);
} .mewi-block :is(a, button, [tabindex]):focus-visible {
outline: 3px solid var(--mewi-focus);
outline-offset: 3px;
} .mewi-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .mewi-frame {
position: relative;
padding: clamp(1.25rem, 2.6vw, 2.6rem);
}
.mewi-frame::before,
.mewi-frame::after {
content: "";
position: absolute;
background: var(--mewi-cyan-soft);
}
.mewi-frame::before {
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.mewi-frame::after {
right: 0;
bottom: 0;
width: clamp(200px, 20vw, 300px);
height: clamp(200px, 20vw, 300px);
}
.mewi-frame__img {
position: relative;
z-index: 1;
height: 100%;
overflow: hidden;
}
@media (max-width: 991px) {
.mewi-frame__img {
max-height: 450px;
}
}
@media (max-width: 767px) {
.mewi-frame__img {
max-height: 350px;
}
} .mewi-split {
display: flex;
flex-direction: column;
gap: var(--mewi-gap);
}
@media (min-width: 992px) {
.mewi-split {
flex-direction: row;
justify-content: space-between;
}
.mewi-split > * {
width: 48%;
}
} .mewi-card {
padding: clamp(1rem, 2vw, 1.875rem);
background: var(--mewi-white);
color: var(--mewi-ink);
} @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
.mewi-js [data-mewi-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.mewi-js [data-mewi-reveal].is-visible {
opacity: 1;
transform: none;
}
}
.mewi-block .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}