/* Version 1 */
.scroll-jack-x {
    height: 200vh;
}

.scroll-jack-x__stick {
    position: sticky;
    top: 0;
    left: 0;
    min-height: 100vh;
}

.scroll-jack-x__content {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.scroll-jack-x .rown {
    position: relative;
    z-index: 2;
}

.scroll-jack-x__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #0D1521;
}

.scroll-jack-x__img {
    opacity: 0;
}

.scroll-jack-x__img-og {
    opacity: 1;
}

/* Version 2 */
.scrolljack-container {
    position: relative;
    height: 300vh; /* Creates scroll space for the effect */
    z-index: 10;
}

.scrolljack-content {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #0D1521;
    background-image: url('https://gm.com/content/dam/company/img/us/en/gmcom/v4_webready/Homepage/Sketch_transparent.png');
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-size: 923px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Widescreen Laptops */
@media (orientation: landscape) and (max-height: 780px) {
    .scrolljack-content {
        height: 150vh;
    }
}
/* 1320px */
@media screen and (max-width: 1320px) {
    .scrolljack-content, .scrolljack-content .background-layer {
        background-position: 50% 80%;
        background-size: 850px auto;
    }
}
/* 1000px */
@media screen and (max-width: 1000px) {
    .scrolljack-content, .scrolljack-content .background-layer {
        background-size: 84% auto;
    }
}
/* 767px */
@media screen and (max-width: 767px) {
    .scrolljack-content, .scrolljack-content .background-layer {
        background-position: 50% 75%;
    }
}
/* 639px */
@media screen and (max-width: 39.9375em) {
    .scrolljack-content, .scrolljack-content .background-layer {
        background-position: 50% 70%;
        background-size: 95% auto;
    }
}
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #262E39;
    background-image: url('https://gm.com/content/dam/company/img/us/en/gmcom/v4_webready/Homepage/Innovation_2.png');
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-size: 923px auto;
    clip-path: inset(0 0% 0 100%);
    transition: clip-path 0.1s ease-out;
}
.content-text {
    width: 100%;
    height: 100%;
    padding: 60px 0;
    position: relative;
    display: flex;
    z-index: 5;
    flex-direction: column;
    justify-content: space-between;
}
/* ------ Breakpoint references ------ */

/* Small only --- >640px */
@media screen and (max-width: 39.9375em) {}   

/* Medium and up --- 640px< */
@media screen and (min-width: 40em) {}      

/* Medium only --- 640px-1024px*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up --- 1024px<  */
@media screen and (min-width: 64em) {}