.above-the-fold {
    height: calc(100vh - 192px);
    grid-template-rows: 1fr 0.5fr 0.5fr 1.5fr;
    margin-bottom: 0 !important;

    .hero-explanation {
        grid-row: 2;
        align-content: end;
    }

    h1 {
        grid-row: 3;
        align-self: end;
    }

    .arrow-wrapper {
        grid-row: 2/ span 2;
        grid-column: 8;
        position: relative;

        img {
            position: absolute;
            bottom: 0;
            /* height: 120%; */
            height: 34vh;
            margin: 0 auto;
        }
    }
}


section:not(.d-flex) {
    margin-bottom: 30vh !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.weidner-introduction {

    h2,
    h4,
    p {
        grid-column: 2/ span 4;
    }

    h2,
    h4 {
        align-self: end;
    }

    .tooth-wrapper {
        grid-column: 8/ span 4;
        grid-row: 1/ span 2;

        img {
            display: block;
            width: 80%;
            margin: 0 auto;
        }
    }

}

.weidner-concept {

    h3,
    h4,
    p {
        grid-column: 1/ span 12;
        justify-self: center;
    }

    p.intro {
        margin-top: -1rem;
    }

    .supporter-wrapper {
        grid-column: 5/ span 4;

        img {
            display: block;
            width: 80%;
            justify-self: center;
            margin: 0 auto;
        }
    }

}

.weidner-design {
    .what-was-done {
        margin-top: 1rem;
        display: flex;
        column-gap: 2rem;
        row-gap: 1rem;
        grid-column: 1/span 12;
        flex-wrap: wrap;

        .what-was-done-topic {
            text-wrap: nowrap;
            font-weight: 400;
        }
    }

    .design-visuals {
        margin-top: 4rem;

        .mobile-screenshot-wrapper {
            padding: 4em;
            background-color: #353534;
            margin-bottom: 3rem;
        }

        .desktop-screenshot-wrapper {
            padding: 4em;
            background-color: #7e0103;
            height: fit-content;
            margin-bottom: 2rem;
        }

        .typography-wrapper {
            border: 3px solid var(--black);
        }

        .colorscheme-wrapper {
            padding: 4rem;
            background-color: #BFBFBD;
        }

        .left {
            grid-column: 1 / span 4;
            grid-row: 1;
        }

        .right {
            grid-column: 5 / span 8;
            grid-row: 1;
        }

        img {
            width: 100%;
            display: block;
        }
    }
}

.weidner-development {
    h3 {
        grid-column: 1/ span 12;
        justify-self: center;
    }

    h5 {
        grid-column: 3/ span 8;
        justify-self: center;
        font-weight: 400;
        text-align: center;
    }

    .video-wrapper {
        grid-column: 1/ span 12;
        justify-self: center;
        margin-top: 4rem;

        video {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .brand-icon-wrapper {
        margin-top: 8rem;
        grid-row: 3;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;


        img {
            display: block;
            width: 100%;
        }

        &:first-of-type {
            grid-column: 3/ span 2;
        }

        &:nth-of-type(2) {
            grid-column: 6/ span 2;

            img {
                width: 50%;
            }
        }

        &:last-of-type {
            grid-column: 9/ span 2;

            img {
                width: 100%;
            }
        }
    }
}

.weidner-newspaper {
    .newspaper-text {
        position: relative;
        grid-column: 2/span 4;
        align-content: center;

        h5 {
            font-weight: 400;
        }


        p {
            margin: 1.5rem 0;
        }

        span {
            font-weight: 700;
        }

        a {
            position: absolute;
            bottom: 0;
        }

    }

    .video-wrapper {
        grid-column: 8/span 4;

        video {
            width: 100%;
            height: auto;
            display: block;
        }
    }
}


.scrollable-video-wrapper {
    position: relative;
    height: 150vh;
    /*gives scroll space for playback */
}

.video-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

video.scrollable {
    width: 40vw;
    min-width: 480px;
    max-width: 1000px;
    height: auto;
}

.info-video-first {
    .video-wrapper {
        grid-column: 2/ span 4;
        grid-row: span 2;
        margin-bottom: 4rem;
        align-self: center;
        margin: 0;

        video {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    h2,
    h4,
    h5,
    p {
        grid-column: 8/ span 4;
    }

    h2,
    h4 {
        align-self: end;
    }

}

.b2s-design {
    .video-wrapper {
        grid-column: 8/ span 4;
        grid-row: 1/span 2;

        video {
            width: 80%;
            height: auto;
            display: block;
        }
    }

    .what-was-done {
        grid-row: 2;
        grid-column: 2/ span 4;

    }


    h3 {
        align-self: end;
        grid-column: 2 / span 4;
    }
}

.b2s-development {

    height: 80vh;
    align-content: center;

}

.b2s-cta {
    height: 40vh;
    align-content: center;

    h2 {
        grid-column: span 12;
    }

    p {
        grid-row: 4;
        grid-column: span 6;
    }

    a {
        grid-column: span 12;
        grid-row: 5;
        width: fit-content;
    }
}


.more {
    row-gap: 2rem;

    >* {
        grid-column: 1 /span 12;
        justify-self: center;
    }

    .arrow-wrapper {
        height: 25dvw;
        margin-bottom: 40vh;

        img {
            height: 100%;
        }
    }

    a {
        display: block;
        margin-bottom: 50vh;
    }
}


@media only screen and (max-width: 590px) {
    .above-the-fold {
        /* height: calc(100dvh - 96px); */
        grid-template-rows: 0.25fr auto auto 1fr;

        .headline {
            font-size: 3.584rem !important;
        }

        .hero-explanation {
            grid-row: 2;
            grid-column: span 12;
            align-content: end;
        }

        h1 {
            grid-row: 3;
            grid-column: span 12;
            align-self: end;
        }

        .arrow-wrapper {
            grid-row: 4/ span 2;
            grid-column: 1;
            grid-column: span 12;
            position: relative;
            justify-items: center;

            img {
                position: relative;
                /* bottom: 0; */
                /* height: 80%; */
                height: 24vh;
                display: block;
            }
        }
    }

    .weidner-introduction {

        h2,
        p {
            grid-column: 1/ span 12;
        }

        h2 {
            align-self: end;
        }

        h4 {
            grid-column: 1/ span 4;
        }


        .tooth-wrapper {
            grid-column: 1/ span 12;
            grid-row: 3/ span 2;
            margin-top: 2rem;

            img {
                display: block;
                width: 80%;
                justify-self: center;

            }
        }

    }

    .weidner-concept {

        p.intro {
            grid-column: 2/ span 10;
            text-align: center;
        }

        .supporter-wrapper {
            grid-column: 2/ span 10;

            img {
                width: 100%;
            }
        }

    }

    .weidner-design {
        .what-was-done {


            .what-was-done-topic {
                display: block;
            }
        }

        .design-visuals {
            .mobile-screenshot-wrapper {
                padding: 2em;
            }

            .desktop-screenshot-wrapper {
                padding: 2em;
            }

            .colorscheme-wrapper {
                padding: 2rem;
            }

            .left {
                grid-column: 1 / span 12;
                grid-row: 1;
            }

            .right {
                grid-column: 1 / span 12;
                grid-row: 2;
            }

            img {
                width: 100%;
                display: block;
            }
        }

    }

    .weidner-development {
        h5 {
            grid-column: 1/ span 12;
            justify-self: start;
        }
    }

    .weidner-newspaper {
        .newspaper-text {
            grid-column: 1/span 12;
            grid-row: 1;

            h5 {
                font-weight: 400;
            }

            p {
                margin: 1.5rem 0;
            }

            a {
                position: relative;
            }

        }

        .video-wrapper {
            grid-column: 1/ span 12;
            grid-row: 2;
        }
    }

    video.scrollable {
        width: 100%;
        min-width: initial;
    }

    .info-video-first {

        h4,
        p {
            grid-column: 1/ span 12;

        }

        .video-wrapper {
            grid-row: 3;
            grid-column: span 12;

        }
    }

    .b2s-design {
        .video-wrapper {
            grid-column: span 12;
            grid-row: 3;
            justify-self: center;
            align-items: center;
            display: flex;
            flex-direction: column;
        }

        .video-wrapper video {
            margin: 0 auto;
            display: block;
        }

        h3 {
            grid-column: 1 / span 12;
        }

        .what-was-done {
            grid-row: 2;
            grid-column: 1/ span 12;

        }

    }

    .brand-icon-wrapper {
        grid-column: 2/ span 10 !important;
        grid-row: auto !important;
    }

    .b2s-cta {
        p {
            grid-column: span 12;
        }
    }


    .more {
        .arrow-wrapper {
            height: 100dvw;
        }
    }
}