.mas-hero-carousel {
--mas-card-radius: 22px;
--mas-arrow-size: 52px;
--mas-container-max: 1288px;
--mas-container-padding: 36px;
--mas-left-arrow-offset: 82px;
--mas-card-width: clamp(338px, calc(11.512vw + 290px), 440px);
--mas-card-gap: 20px;
--mas-section-height: clamp(500px, calc(13.544vw + 444px), 620px);
--mas-card-row: calc((var(--mas-section-height) - var(--mas-card-gap)) / 2);
--mas-start-offset: 36px;
color: #172033;
font-family: Inter, Arial, sans-serif;
overflow: hidden;
left: 50%;
margin-left: -50vw;
position: relative;
width: 100vw;
}
.mas-hero-carousel * {
box-sizing: border-box;
}
.elementor-widget-mas_hero_carousel,
.elementor-widget-mas_hero_carousel .elementor-widget-container {
overflow: visible;
}
.mas-hero-carousel__viewport {
margin: 0;
max-width: none;
position: relative;
}
.mas-hero-carousel__track {
display: grid;
gap: var(--mas-card-gap);
grid-auto-columns: var(--mas-card-width);
grid-auto-flow: column;
grid-template-columns: var(--mas-start-offset);
grid-template-rows: repeat(2, var(--mas-card-row));
height: var(--mas-section-height);
overflow-x: auto;
overflow-y: hidden;
padding: 4px 92px 8px 0 !important;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.mas-hero-carousel.is-at-start .mas-hero-carousel__track {
scroll-snap-type: none;
}
.mas-hero-carousel.is-wheel-scrolling .mas-hero-carousel__track {
scroll-snap-type: none;
}
.mas-hero-carousel__spacer {
grid-row: span 2;
pointer-events: none;
scroll-snap-align: start;
scroll-snap-stop: always;
width: var(--mas-start-offset);
}
.mas-hero-carousel__track::-webkit-scrollbar {
display: none;
}
.mas-hero-carousel__track:focus {
outline: none;
}
.mas-hero-carousel__track:focus-visible {
outline: 2px solid #7668e7;
outline-offset: 4px;
}
.mas-hero-carousel__card {
background: var(--mas-card-bg, #dff4ff);
background-image: var(--mas-card-bg-image, none) !important;
background-position: var(--mas-card-bg-position, center bottom) !important;
background-repeat: var(--mas-card-bg-repeat, no-repeat) !important;
background-size: var(--mas-card-bg-size, cover) !important;
border: 0 !important;
border-color: transparent !important;
border-radius: var(--mas-card-radius);
box-shadow: none !important;
color: inherit;
display: block;
font-family: var(--mas-card-font-family, inherit);
isolation: isolate;
min-width: 0;
outline: 0 !important;
overflow: hidden;
position: relative;
scroll-snap-align: start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.mas-hero-carousel__card:hover,
.mas-hero-carousel__card:focus,
.mas-hero-carousel__card:focus-visible {
background: var(--mas-card-bg, #dff4ff);
background-image: var(--mas-card-bg-image, none) !important;
background-position: var(--mas-card-bg-position, center bottom) !important;
background-repeat: var(--mas-card-bg-repeat, no-repeat) !important;
background-size: var(--mas-card-bg-size, cover) !important;
border: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
color: inherit;
outline: 0 !important;
text-decoration: none;
}
.mas-hero-carousel__card:hover {
transform: translateY(-3px);
}
.mas-hero-carousel__card::before,
.mas-hero-carousel__card::after,
.mas-hero-carousel__card:hover::before,
.mas-hero-carousel__card:hover::after {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.mas-hero-carousel__card::before {
background-color: var(--mas-overlay-color, transparent);
background-image: var(--mas-overlay-image, none);
background-position: var(--mas-overlay-position, center center);
background-repeat: var(--mas-overlay-repeat, no-repeat);
background-size: var(--mas-overlay-size, cover);
content: "";
inset: 0;
opacity: var(--mas-overlay-opacity, 0);
pointer-events: none;
position: absolute;
z-index: 3;
}
.mas-hero-carousel__card--has-overlay::before {
opacity: var(--mas-overlay-opacity, 1);
} @media (max-width: 767px) {
.mas-hero-carousel__card--has-image-mask.mas-mask-m-mobile-wave-bottom::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-diagonal::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-blob::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-inverse-diagonal::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-steep-diagonal::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-arc-smooth::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-zigzag-bottom::after,
.mas-hero-carousel__card--has-image-mask.mas-mask-m-double-wave::after {
background: var(--mas-image-mask-color, #e31e24);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-mobile-wave-bottom::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 7%),
82% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 1%),
62% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
42% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
22% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 5%),
0% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 3%)
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
0% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-blob::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 22%),
90% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 10%),
74% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 16%),
52% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 8%),
28% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 14%),
0% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%)
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-inverse-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
0% var(--mas-inverse-diagonal-left-pct, 72%)
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-steep-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 18%),
0% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-arc-smooth::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 11%),
91% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 2%),
83% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 8%),
74% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 1%),
66% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 7%),
58% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
50% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
41% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 2%),
33% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 7%),
24% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 1%),
16% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
8% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 3%),
0% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 5%)
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-zigzag-bottom::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 9%),
88% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
76% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
64% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
52% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
40% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
28% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
14% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
0% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 7%)
);
}
.mas-hero-carousel__card--has-image-mask.mas-mask-m-double-wave::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%),
86% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
72% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 8%),
58% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
44% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 8%),
30% var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)),
0% calc(var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)) + 6%)
);
}
}
@media (min-width: 768px) {
.mas-hero-carousel__card--has-image-mask:not(.mas-hero-carousel__card--mask-also-desktop)::after {
content: none !important;
display: none !important;
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-mobile-wave-bottom::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-diagonal::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-blob::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-inverse-diagonal::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-steep-diagonal::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-arc-smooth::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-zigzag-bottom::after,
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-double-wave::after {
background: var(--mas-image-mask-color-desktop, var(--mas-image-mask-color, #e31e24));
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-mobile-wave-bottom::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 7%),
82% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 1%),
62% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
42% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
22% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 5%),
0% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 3%)
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
0% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)))
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-blob::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 22%),
90% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 10%),
74% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 16%),
52% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 8%),
28% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 14%),
0% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%)
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-inverse-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
0% var(--mas-inverse-diagonal-left-desktop-pct, var(--mas-inverse-diagonal-left-pct, 72%))
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-steep-diagonal::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 18%),
0% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%)))
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-arc-smooth::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 11%),
91% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 2%),
83% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 8%),
74% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 1%),
66% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 7%),
58% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
50% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
41% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 2%),
33% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 7%),
24% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 1%),
16% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
8% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 3%),
0% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 5%)
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-zigzag-bottom::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 9%),
88% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
76% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
64% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
52% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
40% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
28% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
14% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
0% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 7%)
);
}
.mas-hero-carousel__card--mask-also-desktop.mas-mask-d-double-wave::after {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%),
86% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
72% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 8%),
58% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
44% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 8%),
30% var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))),
0% calc(var(--mas-image-mask-height-desktop-pct, var(--mas-image-mask-height-mobile-pct, var(--mas-image-mask-height-pct, 62%))) + 6%)
);
}
}
.mas-hero-carousel__card--large {
grid-row: span 2;
}
.mas-hero-carousel__stack {
display: flex;
flex-direction: column;
gap: var(--mas-card-gap);
grid-row: span 2;
min-width: 0;
scroll-snap-align: start;
}
.mas-hero-carousel__stack .mas-hero-carousel__card {
flex: 1 1 0;
scroll-snap-align: none;
}
.mas-hero-carousel__card--small {
min-height: 210px;
}
.mas-hero-carousel__content {
display: flex;
flex-direction: column;
height: 100%;
max-width: var(--mas-card-content-width, none);
padding: 30px 28px 24px;
position: relative;
z-index: 4;
}
.mas-hero-carousel__badge {
align-self: flex-start;
background: rgba(255, 255, 255, 0.86);
border-radius: 999px;
color: var(--mas-card-badge-color, #465064);
font-family: var(--mas-card-badge-font-family, var(--mas-card-font-family, inherit));
font-size: var(--mas-card-badge-font-size, 11px);
font-style: var(--mas-card-badge-font-style, normal);
font-weight: var(--mas-card-badge-font-weight, 600);
letter-spacing: var(--mas-card-badge-letter-spacing, 0.03em);
line-height: var(--mas-card-badge-line-height, 1);
margin-bottom: 18px;
padding: 8px 12px;
text-transform: var(--mas-card-badge-text-transform, uppercase);
}
.mas-hero-carousel__title {
color: var(--mas-card-title-color, #172033);
font-family: var(--mas-card-title-font-family, var(--mas-card-font-family, inherit));
font-size: var(--mas-card-title-font-size, 24px);
font-style: var(--mas-card-title-font-style, normal);
font-weight: var(--mas-card-title-font-weight, 500);
letter-spacing: var(--mas-card-title-letter-spacing, -0.02em);
line-height: var(--mas-card-title-line-height, 1.16);
margin: 0;
max-width: var(--mas-card-title-width, 280px);
text-transform: var(--mas-card-title-text-transform, none);
}
.mas-hero-carousel__subtitle {
color: var(--mas-card-subtitle-color, #3d485c);
font-family: var(--mas-card-subtitle-font-family, var(--mas-card-font-family, inherit));
font-size: var(--mas-card-subtitle-font-size, 14px);
font-style: var(--mas-card-subtitle-font-style, normal);
font-weight: var(--mas-card-subtitle-font-weight, 400);
letter-spacing: var(--mas-card-subtitle-letter-spacing, normal);
line-height: var(--mas-card-subtitle-line-height, 1.35);
margin-top: 12px;
max-width: var(--mas-card-subtitle-width, 260px);
text-transform: var(--mas-card-subtitle-text-transform, none);
}
.mas-hero-carousel__number {
color: var(--mas-card-number-color, #22a9e5);
font-family: var(--mas-card-number-font-family, var(--mas-card-font-family, inherit));
font-size: var(--mas-card-number-font-size, 52px);
font-style: var(--mas-card-number-font-style, normal);
font-weight: var(--mas-card-number-font-weight, 400);
letter-spacing: var(--mas-card-number-letter-spacing, -0.04em);
line-height: var(--mas-card-number-line-height, 1);
margin-top: 18px;
text-transform: var(--mas-card-number-text-transform, none);
}
.mas-hero-carousel__button {
align-self: var(--mas-button-align, flex-start);
background: var(--mas-button-bg, #172033) !important;
border: var(--mas-button-border-width, 0) solid var(--mas-button-border-color, #172033) !important;
border-radius: var(--mas-button-border-radius, 999px);
color: var(--mas-button-color, #fff) !important;
display: inline-flex;
font: inherit;
line-height: 1;
margin-top: var(--mas-button-margin-top, 24px);
padding: var(--mas-button-padding, 12px 20px);
position: relative;
text-decoration: none !important;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
z-index: 4;
}
.mas-hero-carousel__button:hover,
.mas-hero-carousel__button:focus-visible {
background: var(--mas-button-hover-bg, #7668e7) !important;
border-color: var(--mas-button-hover-border-color, #7668e7) !important;
color: var(--mas-button-hover-color, #fff) !important;
outline: none;
text-decoration: none !important;
}
.mas-hero-carousel__image {
bottom: var(--mas-image-bottom, 0);
left: 0;
pointer-events: none;
position: absolute;
right: 0;
transform: translateX(var(--mas-image-x, 0));
z-index: 1;
}
.mas-hero-carousel__image img {
display: block;
height: auto;
max-width: none;
width: var(--mas-image-width, 100%);
}
.mas-hero-carousel__card--large .mas-hero-carousel__image {
bottom: -2px;
}
.mas-hero-carousel__card--large .mas-hero-carousel__image img {
width: var(--mas-image-width, 100%);
}
.mas-hero-carousel__card--small .mas-hero-carousel__content {
padding: 22px 20px;
}
.mas-hero-carousel__card--small .mas-hero-carousel__badge {
font-size: var(--mas-card-badge-font-size, 9px);
margin-bottom: 14px;
padding: 7px 10px;
}
.mas-hero-carousel__card--small .mas-hero-carousel__title {
font-size: var(--mas-card-title-font-size, 18px);
line-height: var(--mas-card-title-line-height, 1.18);
max-width: var(--mas-card-title-width, 190px);
}
.mas-hero-carousel__card--small .mas-hero-carousel__subtitle {
display: block;
font-size: var(--mas-card-subtitle-font-size, 12px);
max-width: var(--mas-card-subtitle-width, 180px);
margin-top: 8px;
}
.mas-hero-carousel__card--small .mas-hero-carousel__number {
font-size: var(--mas-card-number-font-size, 38px);
margin-top: 12px;
}
.mas-hero-carousel__card--small .mas-hero-carousel__image {
left: auto;
width: 58%;
}
.mas-hero-carousel__arrow {
align-items: center;
background: var(--mas-arrow-bg, #fff) !important;
border: 0;
border-radius: 50%;
box-shadow: 0 14px 32px rgba(74, 83, 112, 0.18);
color: var(--mas-arrow-color, #7668e7) !important;
cursor: pointer;
display: flex;
height: var(--mas-arrow-size);
justify-content: center;
margin: 0;
padding: 0;
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
width: var(--mas-arrow-size);
z-index: 5;
}
.mas-hero-carousel.is-at-start .mas-hero-carousel__arrow--prev,
.mas-hero-carousel__arrow[hidden],
.mas-hero-carousel__arrow.is-hidden {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.mas-hero-carousel__arrow--prev {
opacity: 0;
pointer-events: none;
}
.mas-hero-carousel:not(.has-scrolled) .mas-hero-carousel__arrow--prev {
opacity: 0 !important;
pointer-events: none !important;
}
.mas-hero-carousel.has-scrolled .mas-hero-carousel__arrow--prev:not(.is-hidden) {
opacity: 1;
pointer-events: auto;
}
.mas-hero-carousel__arrow:hover,
.mas-hero-carousel__arrow:focus-visible {
background: var(--mas-arrow-hover-bg, #7668e7) !important;
color: var(--mas-arrow-hover-color, #fff) !important;
outline: none;
}
.mas-hero-carousel__arrow--prev {
left: var(--mas-left-arrow-offset);
right: auto;
}
@media (max-width: 1024px) {
.mas-hero-carousel {
--mas-container-padding: 32px;
--mas-left-arrow-offset: 70px;
--mas-card-width: clamp(300px, 32vw, 360px);
--mas-section-height: var(--mas-section-height-tablet, clamp(430px, 48vw, 540px));
--mas-card-row: calc((var(--mas-section-height) - var(--mas-card-gap)) / 2);
}
.mas-hero-carousel__track {
padding-right: 76px;
}
}
@media (max-width: 767px) {
.mas-hero-carousel {
--mas-card-radius: 18px;
--mas-arrow-size: 44px;
--mas-container-padding: 16px;
--mas-left-arrow-offset: 26px;
--mas-card-gap: 14px;
--mas-section-height: var(--mas-section-height-mobile, 500px);
--mas-start-offset: 15px !important;
}
.mas-hero-carousel__track {
display: flex;
gap: 14px;
height: var(--mas-section-height);
padding: 2px 15px 6px 0 !important;
}
.mas-hero-carousel__spacer {
flex: 0 0 var(--mas-start-offset);
scroll-snap-align: start;
}
.mas-hero-carousel__card {
flex: 0 0 calc(100vw - 62px);
height: var(--mas-section-height);
min-height: var(--mas-section-height);
}
.mas-hero-carousel__stack {
flex: 0 0 calc(100vw - 62px);
gap: 14px;
height: var(--mas-section-height);
min-height: var(--mas-section-height);
}
.mas-hero-carousel__stack .mas-hero-carousel__card {
flex: 1 1 0;
height: auto;
min-height: 0;
}
.mas-hero-carousel__card--small {
height: auto;
min-height: 0;
}
.mas-hero-carousel__title {
max-width: var(--mas-card-title-width, 230px);
}
.mas-hero-carousel__content {
padding: 18px 18px 20px;
}
.mas-hero-carousel__badge {
margin-bottom: 16px;
padding: 7px 11px;
}
.mas-hero-carousel__subtitle {
max-width: var(--mas-card-subtitle-width, 225px);
}
.mas-hero-carousel__card--large .mas-hero-carousel__image {
bottom: 0;
top: auto;
}
.mas-hero-carousel__card--large .mas-hero-carousel__image img {
height: auto;
object-fit: contain;
object-position: center bottom;
width: var(--mas-image-width, 100%);
}
.mas-hero-carousel__card--small .mas-hero-carousel__title {
max-width: var(--mas-card-title-width, 190px);
}
.mas-hero-carousel__arrow {
display: none !important;
}
}