:root {
    --cb-parallax-height: 300px;
    --cb-parallax-height-lg: 700px;

    --cb-parallax-image-content-bottom: 30px;
    --cb-parallax-image-content-font-color: #FFFFFF;
    --cb-parallax-image-content-font-size: 16px;
    --cb-parallax-image-content-font-weight: 600;
}

.cb-parallax-image-container {
    height: var(--cb-parallax-height);
    overflow: hidden;
    position: relative;
}

.cb-parallax-image-container > * {
    height: 100%;
}

.cb-parallax-image-container .cb-parallax-image {
    height: var(--cb-parallax-height);
    background: transparent;
}


.cb-parallax-image-content-element {
    position: absolute;
    width: 100%;
    bottom: var(--cb-parallax-image-content-bottom);
    left: 0;
    height: auto;

    .cb-parallax-image-content {
        color: var(--cb-parallax-image-content-font-color);
        font-size: var(--cb-parallax-image-content-font-size);
        font-weight: var(--cb-parallax-image-content-font-weight);

        > * {
            color: inherit;
        }
    }
}


@media screen and (min-width: 1025px) {
    .cb-parallax-image-container {
        height: var(--cb-parallax-height-lg);
    }
    .cb-parallax-image-container .cb-parallax-image {
        height: var(--cb-parallax-height-lg);
    }
}