.npg-natural-scroll {
--npg-sticky-top: 0px;
background-color: var(--e-global-color-78e0a74, #f1e6cf);
color: var(--e-global-color-primary, #433126);
overflow: clip;
}
.npg-natural-scroll__grid {
display: flex;
align-items: flex-start;
min-height: 100vh;
}
.npg-natural-scroll__left {
flex: 1 1 auto;
min-width: 0;
position: sticky;
top: 0;
height: 100vh;
}
.npg-natural-scroll--text-left .npg-natural-scroll__left {
order: 2;
}
.npg-natural-scroll--text-left .npg-natural-scroll__right {
order: 1;
}
.npg-natural-scroll__image-viewport {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.npg-natural-scroll__image-track {
display: flex;
height: 100%;
will-change: transform;
}
.npg-natural-scroll__image-card {
flex: 0 0 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.npg-natural-scroll__image-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.npg-natural-scroll__right {
flex: 0 0 520px;
position: sticky;
top: var(--npg-sticky-top);
min-height: calc(100vh - var(--npg-sticky-top));
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 7vw, 110px) clamp(28px, 5vw, 88px);
}
.npg-natural-scroll__text-panel {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.npg-natural-scroll__text-panel h2 {
margin: 0 0 24px;
color: currentColor;
font-family: "Montserrat", sans-serif;
font-size: clamp(34px, 4.4vw, 55px);
font-weight: 600;
line-height: 1;
}
.npg-natural-scroll__content {
max-width: 620px;
}
.npg-natural-scroll__content,
.npg-natural-scroll__content p {
color: currentColor;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.65;
}
.npg-natural-scroll__content p:last-child {
margin-bottom: 0;
}
@media (max-width: 1024px) {
.npg-natural-scroll--text-left .npg-natural-scroll__left,
.npg-natural-scroll--text-left .npg-natural-scroll__right {
order: initial;
}
.npg-natural-scroll__grid {
display: block;
}
.npg-natural-scroll__image-viewport,
.npg-natural-scroll__left,
.npg-natural-scroll__right {
position: relative;
top: auto;
height: auto;
min-height: 0;
}
.npg-natural-scroll__image-track {
display: block;
transform: none !important;
}
.npg-natural-scroll__image-card {
height: 56vh;
}
.npg-natural-scroll__right {
padding: 52px 24px 72px;
}
.npg-natural-scroll__text-panel {
min-height: auto;
padding: 36px 0;
}
}