/* BLOCK: Scrolljacking */

.block-scrolljacking {
    position: relative;
    overflow: clip;
}

.block-scrolljacking .content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 8.625rem;
}

.block-scrolljacking .left-side {
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
    position: sticky;
    /* top: 7.5rem; */
    top: calc(var(--header-height, 0px) + 2.5rem);
    left: 0;
    align-self: flex-start;
}

.block-scrolljacking .left-side .text-content {
    color: rgb(from currentColor r g b / .8);
}

.block-scrolljacking .left-side .text-content > * {
    margin-block: 0 2.5rem;
}

.block-scrolljacking .left-side .text-content > :where(h1, h2) {
    margin-bottom: 3.125rem;
}

.block-scrolljacking .left-side .text-content > :last-child {
    margin-bottom: 0;
}

.block-scrolljacking .cta-buttons {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: center;
}

.block-scrolljacking .cta-buttons:not(:first-child) {
    margin-top: 2.5rem;
}

.block-scrolljacking.type--indicator .cta-buttons:not(:first-child) {
    margin-top: 3.125rem;
}

.block-scrolljacking .design-element {
    position: absolute;
    /* top: 100%; */
    top:130%;
    /* left: calc(-1 * var(--offset, 0px)); */
    right: 44%;
    margin-top: 4.375rem;
    color: var(--c-tertiary);
    max-width: unset;
    /* width: 115%; */
    width: 173%;
    height: auto;
    /* transform: translateX(-36%); */
    transform: scaleX(-1);
}

.block-scrolljacking .right-side {
    position: relative;
    flex-basis: 55%;
    padding-top: 8.125rem;
}

.block-scrolljacking.type--indicator .right-side {
    padding: 13.625rem 0 6.125rem 4.625rem;
    margin-top: 3.625rem;
    counter-reset: index;
}

.block-scrolljacking.type--indicator .right-side::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 1.375rem;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(0deg, transparent, #47517B 13.625rem, #47517B calc(100% - 13.625rem), transparent);
}

.block-scrolljacking.type--indicator .scroll-content {
    counter-increment: index;
}

.block-scrolljacking.type--indicator .scroll-content::before {
    content: '0' counter(index);
    position: absolute;
    left: 0;
    padding: 0.35rem 0.8125rem;
    background-color: var(--c-primary);
    border-radius: 4px;
    font-size: var(--font-15-11);
    font-weight: 700;
    margin-top: -0.35rem;
}

.block-scrolljacking .scroll-content:not(:last-child) {
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    border-bottom: 1px solid rgb(from currentColor r g b / .15);
}

.block-scrolljacking.type--indicator .scroll-content:not(:last-child) {
    padding-bottom: 0;
    margin-bottom: 6.5rem;
    border: 0;
}

.block-scrolljacking .scroll-content .icon {
    max-width: 3.125rem;
    max-height: 3.125rem;
    margin-bottom: 1.875rem;
}

.block-scrolljacking .scroll-content .text-content {
    /* color: rgb(from currentColor r g b / .85); */
    color: #D1D2D7;
    font-size: var(--font-17-15);
}

.block-scrolljacking .scroll-content .text-content > * {
    margin-block: 0 1.5rem;
}

.block-scrolljacking.type--indicator .scroll-content .text-content > * {
    margin-bottom: 1.875rem;
}

.block-scrolljacking .scroll-content .text-content > :last-child {
    margin-bottom: 0 !important;
}

@media screen and (width <= 620px) {
    .block-scrolljacking .content-wrapper {
        flex-direction: column;
        gap: 2.5rem;
    }
    .block-scrolljacking .left-side {
        position: static;
    }
    .block-scrolljacking .scroll-content:not(:last-child) {
        padding-bottom: 1.875rem;
        margin-bottom: 1.875rem;
    }
    .block-scrolljacking .right-side {
        padding-top: 0;
    }
    .block-scrolljacking.type--indicator .right-side {
        margin-top: 0;
        padding: 6.25rem 0 0 3.8125rem;
    }
    .block-scrolljacking.type--indicator .right-side::before {
        left: 0.9375rem;
        background-image: linear-gradient(0deg, transparent, #47517B 6.25rem, #47517B calc(100% - 6.25rem), transparent);
    }
    .block-scrolljacking.type--indicator .scroll-content:not(:last-child) {
        margin-bottom: 5.1875rem;
    }
    .block-scrolljacking.type--indicator .scroll-content::before {
        padding: 0.25rem 0.56rem;
    }
    .block-scrolljacking .cta-buttons:not(:first-child) {
        margin-top: 1.25rem;
    }
    .block-scrolljacking.type--indicator .cta-buttons:not(:first-child) {
        margin-top: 2.5rem;
    }
    .block-scrolljacking .left-side .text-content > *,
    .block-scrolljacking.type--indicator .scroll-content .text-content > * {
        margin-block: 0 1.5rem;
    }
    .block-scrolljacking .left-side .text-content > :where(h1, h2),
    .block-scrolljacking.type--indicator .scroll-content .text-content > :where(h1, h2) {
        margin-bottom: 1.875rem;
    }
    .block-scrolljacking .scroll-content .icon {
        max-width: 2.5rem;
        max-height: 2.5rem;
        margin-bottom: 1.5rem;
    }
}