#losningenWrapper {
    height: 333vh;
    width: 100%;
    background-color: #f7f7f7;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr 3fr 3fr 4fr 4fr 3fr 3fr 5fr 4fr 5fr 1fr 2fr;
    grid-template-areas:
        "banner"
        "text1"
        "text2"
        "text3"
        "bild1"
        "text4"
        "bild2"
        "text5"
        "bild3"
        "text6"
        "text7"
        "next";
}

#text1 {
    grid-area: text1;
}

#text2 {
    grid-area: text2;
}

#text3 {
    grid-area: text3;
}

#text4 {
    grid-area: text4;
}

#text5 {
    grid-area: text5;
}

#text6 {
    grid-area: text6;
}

#text7 {
    grid-area: text7;
}

#bild1 {
    grid-area: bild1;
}

#bild2 {
    grid-area: bild2;
}

#bild3 {
    grid-area: bild3;
}

#next {
    grid-area: next;
    color: black;
}

.image {
    width: 100%;
    margin: auto;
}

@media only screen and (min-width: 600px) {
    #losningenWrapper {
        grid-template-columns: 1fr 12fr 1fr;
        grid-template-areas:
            "banner banner banner"
            ". text1 ."
            ". text2 ."
            ". text3 ."
            ". bild1 ."
            ". text4 ."
            ". bild2 ."
            ". text5 ."
            ". bild3 ."
            ". text6 ."
            ". text7 ."
            ". next .";
    }
}

@media only screen and (min-width: 769px) {
    #losningenWrapper {
        height: 201vh;
        grid-template-columns: 1fr 3fr 3fr 1fr;
        grid-template-rows: 3fr 2fr 3fr 3fr 4fr 4fr 3fr 1fr 1fr;
        grid-template-areas:
            "banner banner banner banner"
            ". text1 text1 ."
            ". text2 bild1 ."
            ". text3 bild1 ."
            ". bild2 text4 ."
            ". text5 bild3 ."
            ". text6 text7 ."
            ". next . .";
    }

    #text1 {
        text-align: center;
    }

    #bild1 {
        width: 80%;
    }

    #bild2 {
        width: 75%;
    }

    #bild3 {
        width: 60%;
    }

    #text6,
    #text7 {
        margin-top: 3vh;
    }
}