.n-scrollytelling__overlay-text-box--background-dark {
    .n-scrollytelling__overlay-text{
        color: #fff;
    }
    background: rgba(0, 0, 0, .9);
}

.n-scrollytelling__overlay-text-box--background-light {
    .n-scrollytelling__overlay-text{
        color: #000;
    }
    background: rgba(255, 255, 255, .9);
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    // If backdrop-filter is supported use it to help increase contrast of text over the background
    // Rely slightly less (not much) on the the opacity of the background
    .n-scrollytelling__overlay-text-box--background-dark  {
        background: rgba(0, 0, 0, .67);
    }

    .n-scrollytelling__overlay-text-box--background-light {
        background: rgba(255, 255, 255, .7);
    }
}

// This transparent class relies on the CSS cascade rules
// when being applied to overwrite the dark and light styles below
.n-scrollytelling__overlay-text-box--transparent {
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    background: transparent;
}


.n-scrollytelling__overlay-text-box > .n-scrollytelling__overlay-text:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}