.above-the-fold {
    height: calc(100dvh - 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;
        }
    }
}

section:not(.d-flex) {
    margin-bottom: 20dvh !important;
}

.concept {
    row-gap: 5rem;

    .intro {
        grid-row: 1;
        grid-column: 4/span 6;
        justify-items: center;

        h2 {
            margin-bottom: 2rem;
        }
    }

    .supporter-image-wrapper {
        grid-row: 2;
        grid-column: 2/ span 4;

        img {
            display: block;
            width: min(400px, 100%);
        }

        &.reversed {
            grid-column: 7/ span 4;
            grid-row: 3;
        }
    }

    .text-wrapper {
        grid-row: 2;
        grid-column: 7/ span 4;
        align-self: center;

        h3,
        p {
            margin-bottom: 2rem;
        }

        h5 {
            margin-bottom: 1rem;
        }

        &.reversed {
            grid-row: 3;
            grid-column: 2/ span 4;
        }
    }
}

.design {
    .design-cards {
        grid-column: span 12;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        grid-auto-rows: 1fr;

        .design-card {
            display: grid;
            border: 2px solid var(--black);
            padding: 1rem;
            /* grid-column: span 4; */
            /* min-width: 350px; */
            grid-template-rows: 0.5fr 0.5fr 1fr;
        }

        img {
            display: block;
            margin: 0 auto;
            height: 3rem;
        }
    }

}

.intro-design-development {
    grid-column: 1/span 12;
    margin-bottom: 4rem;

    h2 {
        margin-bottom: 2rem;
    }

    p {
        margin-bottom: 1.5rem;
    }
}

.development {
    h3 {
        font-weight: 400;
        margin-bottom: 2rem;
    }


    .development-element:nth-child(even) {
        grid-column: 2/ span 4;
        margin-bottom: 2rem;
    }
    
    .development-element:nth-child(odd) {
        grid-column: 8/span 4;
    }

    .end-phrase {
        grid-column: 5/ span 4;
        text-align: center;
        justify-self: center;
    } 

    .cta-button-primary.section-end {
        grid-column: 5/span 4;
        justify-self: center;
        margin-bottom: 6rem;
    }
}

@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;
                margin: 0 auto;
            }
        }
    }

    .concept {
        row-gap: 3rem;

        .intro {
            grid-row: 1;
            grid-column: 1/span 12;
            justify-items: start;

            h2 {
                margin-bottom: 2rem;
            }
        }

        .supporter-image-wrapper {
            grid-row: 3;
            grid-column: 1/ span 12;

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

            &.reversed {
                grid-column: 1/ span 12;
                grid-row: 5;
            }
        }

        .text-wrapper {
            grid-row: 2;
            grid-column: 1/ span 12;
            align-self: center;

            h3,
            p {
                margin-bottom: 2rem;
                font-weight: 400;
            }

            h5 {
                margin-bottom: 1rem;
                font-size: 1.2rem !important;
            }

            &.reversed {
                grid-row: 4;
                grid-column: 1/ span 12;
            }
        }
    }



    .design {

        .design-cards {
            grid-column: span 12;
            grid-auto-rows: 1fr;
            grid-template-columns: repeat(12, 1fr);

            .design-card {
                display: grid;
                border: 2px solid var(--black);
                padding: 1rem;
                grid-column: span 12;
                grid-template-rows: 0.5fr 0.5fr 1fr;
            }

            img {
                display: block;
                margin: 0 auto;
                height: 3rem;
            }
        }

    }

    .intro-design-development {
        grid-column: 1/span 12;
        margin-bottom: 4rem;

        h2 {
            margin-bottom: 2rem;
        }

        p {
            margin-bottom: 1.5rem;
        }
    }

    .development {
        h3 {
            font-weight: 400;
            margin-bottom: 2rem;
        }
    
        .development-element:nth-child(even), .development-element:nth-child(odd) {
            grid-column: 1/ span 12;
            margin-bottom: 2rem;
        }
  
        .end-phrase {
            grid-column: 1/ span 12;
            text-align: center;
            justify-self: center;
        } 
    
        .cta-button-primary.section-end {
            grid-column: 1/span 12;
            justify-self: center;
            margin-bottom: 6rem;
        }
    }
}