.slides > .section.intro {

    top: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;

    &.fullHeight {
        min-height: 100vh;
    }

    --bgColor: var(--color-base-darker);
    --fgColor: #fff;

    &.light {
        --bgColor: #fff;
        --fgColor: var(--color-base);
    }

    /* background-color: var(--bgColor); */

    padding: var(--gap-huge) 0;

    > .wrapper {

        width: 710px;
        overflow: hidden;

        color: var(--fgColor);

        box-sizing: border-box;

        transition:
            opacity 500ms ease-in-out,
            transform 500ms ease-in-out;

        > h1.intro {
            position: relative;
            font-family: var(--font-family-title);
            font-size: 23pt;
            letter-spacing: -1.2px;
            font-weight: 400;
            line-height: 1.15em;

            margin: 50px;

            #sectionIntroLogo {
                background-color: var(--color-primary);
                padding: 0 .2em;
                margin: 0 .05em;
                font-weight: 500;
                border-radius: var(--border-radius);

                color: hsl(from var(--fgColor) h s l / 0);

                background-size: 85%;
                background-position: center;
                background-repeat: no-repeat;
            }

            > img.scrollDown {
                --size: 1em;
                width: var(--size);
                display: inline;
                vertical-align: calc(var(--size) * -1.75);
            }

            &:before {
                position: absolute;
                inset: -15px;
                content: '';
                background: hsl(from var(--bgColor) h s l);
                filter: blur(30px);
                z-index: -1;
            }
        }

        z-index: 1;

    }
}

body.scrolled .slides > .section.intro > .wrapper {
    opacity: 0;
    transform: translateY(-50px);
}