&.n-scrollytelling--theme-serif {
          font-family: var(--o3-font-family-financier-display), serif;
            .n-scrollytelling__overlay-text-box {
                padding: 16px;
            }

            .n-scrollytelling__overlay-text {
                
                font-size: var(--o3-font-size-5);
                  line-height: var(--o3-font-lineheight-5);
                letter-spacing: 1px;
                text-align: left;
            }

            .n-scrollytelling__overlay-text-slide {
                width: 100%;
                box-sizing: border-box;
                border: 20px solid transparent;
                margin-left: auto;
                margin-right: auto;
            }

            // When we have white text without a background box we want to add a text shadow
            .n-scrollytelling__overlay-text-box--transparent {
                &.n-scrollytelling__overlay-text-box--background-dark {
                    text-shadow: 2px 3px 4px rgba(18, 18, 18, 0.4);
                }
            }

            @include oGridRespondTo($from: M){

                .n-scrollytelling__overlay-text-slide {
                    width: 60%;
                }

                .n-scrollytelling__overlay-text-slide--position-left {
                    margin-left: 50px;
                    width: 50%;
                }

                .n-scrollytelling__overlay-text-slide--position-right {
                    margin-right: 50px;
                    width: 50%;
                }
            }

            @include oGridRespondTo($from: L) {
                .n-scrollytelling__overlay-text-slide {
                    width: 55.56%;
                }

                .n-scrollytelling__overlay-text-slide--position-left {
                    margin-left: 100px;
                    width: 30%;
                }

                .n-scrollytelling__overlay-text-slide--position-right {
                    margin-right: 100px;
                    width: 30%;
                }
            }
        }