@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.cmp-scroll-collapse-image {
    overflow: hidden
}

.cmp-scroll-collapse-image__container {
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin);
    flex-direction: column;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cmp-scroll-collapse-image__top {
    position: relative;
    margin-top: var(--dg-layout-margin);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px
}

.cmp-scroll-collapse-image__title, .cmp-scroll-collapse-image__text {
    text-align: center
}

    .cmp-scroll-collapse-image__title .cmp-title__text {
        font-family: var(--dg-font-family-base);
        font-weight: 300;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-m);
        line-height: var(--dg-font-height-headline-m);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word;
        margin: 0
    }

    .cmp-scroll-collapse-image__text .cmp-text p {
        font-family: var(--dg-font-family-base);
        font-weight: 350;
        font-size: var(--dg-font-size-body-l);
        line-height: var(--dg-font-height-body-l);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word
    }

        .cmp-scroll-collapse-image__text .cmp-text p > a {
            text-decoration: underline
        }

.cmp-scroll-collapse-image__image-container {
    position: relative;
    width: 100%;
    height: 100%
}

.cmp-scroll-collapse-image__image:after {
    position: absolute;
    content: '';
    inset: 0;
    background: linear-gradient(184deg,rgba(0,0,0,0) 51.42%,rgba(0,0,0,0.5) 82.72%);
    transition: opacity .3s ease;
    opacity: 0;
    border-radius: var(--dg-border-radius-l,20px)
}

.cmp-scroll-collapse-image__image--show-gradient::after {
    opacity: 1
}

.cmp-scroll-collapse-image__image .cmp-image__image {
    position: absolute;
    border-radius: var(--dg-border-radius-l,20px);
    width: 100%;
    height: 100vh;
    object-fit: cover;
    max-width: none
}

.cmp-scroll-collapse-image__cta {
    margin-bottom: var(--dg-layout-margin);
    z-index: 4;
    min-width: 178px;
    margin-top: 20px;
    position: relative
}

@media(min-width:480px) {
    .cmp-scroll-collapse-image__top {
        margin-bottom: var(--dg-spacing-l-1)
    }

    .cmp-scroll-collapse-image__cta {
        margin-top: var(--dg-spacing-l-1)
    }
}

@media(min-width:768px) {
    .cmp-scroll-collapse-image__top {
        margin-bottom: 32px
    }

    .cmp-scroll-collapse-image__image:after {
        background: linear-gradient(191deg,rgba(0,0,0,0) 62.04%,rgba(0,0,0,0.5) 76.88%)
    }

    .cmp-scroll-collapse-image__cta {
        margin-top: 32px
    }
}

@media(min-width:1024px) {
    .cmp-scroll-collapse-image__image:after {
        background: linear-gradient(250deg,rgba(0,0,0,0) 47.87%,rgba(0,0,0,0.5) 76.92%)
    }
}

@media(min-width:1440px) {
    .cmp-scroll-collapse-image__top {
        margin-bottom: 40px
    }

    .cmp-scroll-collapse-image__title {
        width: 626px
    }

    .cmp-scroll-collapse-image__text {
        width: 888px
    }

    .cmp-scroll-collapse-image__image:after {
        background: linear-gradient(261deg,rgba(0,0,0,0) 38.42%,rgba(0,0,0,0.5) 67.18%)
    }

    .cmp-scroll-collapse-image__cta {
        margin-top: 40px
    }
}

@media(min-width:1920px) {
    .cmp-scroll-collapse-image__title .cmp-title__text {
        font-size: var(--dg-font-size-headline-l);
        line-height: var(--dg-font-height-headline-l);
        margin: 0
    }
}

.cmp-scroll-collapse-image-item {
    display: flex;
    flex-direction: column;
    gap: var(--dg-spacing-s-5);
    width: 100%;
    padding: 0 16px;
    overflow: hidden;
    position: absolute;
    bottom: 24px;
    opacity: 0;
    pointer-events: none;
    height: 100px
}

    .cmp-scroll-collapse-image-item.mod__active {
        opacity: 1;
        pointer-events: auto
    }

.cmp-scroll-collapse-image-item__container.mod__enter {
    animation: slideIn .3s forwards ease-out
}

.cmp-scroll-collapse-image-item__container.mod__leave {
    animation: slideOut .3s forwards ease-in;
    pointer-events: none
}

.cmp-scroll-collapse-image-item__title, .cmp-scroll-collapse-image-item__text {
    overflow: hidden
}

.cmp-scroll-collapse-image-item__title {
    height: 25px
}

    .cmp-scroll-collapse-image-item__title .cmp-title__text {
        font-family: var(--dg-font-family-base);
        font-weight: 400;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-xs);
        line-height: var(--dg-font-height-headline-xs);
        letter-spacing: var(--dg-font-letter-spacing-m);
        margin: 0
    }

.cmp-scroll-collapse-image-item__text {
    height: 70px
}

    .cmp-scroll-collapse-image-item__text .cmp-text p {
        font-family: var(--dg-font-family-base);
        font-weight: 350;
        font-size: var(--dg-font-size-body-l);
        line-height: var(--dg-font-height-body-l);
        letter-spacing: var(--dg-font-letter-spacing-m)
    }

        .cmp-scroll-collapse-image-item__text .cmp-text p > a {
            text-decoration: underline
        }

@media(min-width:480px) {
    .cmp-scroll-collapse-image-item {
        height: 75px
    }

    .cmp-scroll-collapse-image-item__text {
        height: 45px
    }
}

@media(min-width:768px) {
    .cmp-scroll-collapse-image-item {
        gap: var(--dg-spacing-m-1);
        bottom: 32px;
        padding: 0 32px
    }

    .cmp-scroll-collapse-image-item__title, .cmp-scroll-collapse-image-item__text {
        width: 370px
    }
}

@media(min-width:1440px) {
    .cmp-scroll-collapse-image-item {
        bottom: 60px;
        padding: 0 50px
    }

    .cmp-scroll-collapse-image-item__title {
        height: 28px
    }
}

@keyframes slideIn {
    0 {
        transform: translateY(100%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes slideOut {
    0 {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-100%)
    }
}