#diskussionWrapper {
    height: 311vh;
    width: 100%;
    background-color: #f7f7f7;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr 3fr 3fr 3fr 4fr 4fr 4fr 2fr 6fr 5fr 1fr;
    grid-template-areas:
        "banner"
        "text1"
        "text2"
        "text3"
        "text4"
        "text5"
        "text6"
        "text7"
        "rubrik"
        "text8"
        "text9";
}

#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;
}

#text8 {
    grid-area: text8;
}

#text9 {
    grid-area: text9;
}

#rubrik {
    grid-area: rubrik;
    margin-bottom: 1vh;
}

@media only screen and (min-width: 600px) {
    #diskussionWrapper {
        height: 240vh;
        grid-template-columns: 1fr 12fr 1fr;
        grid-template-areas:
            "banner banner banner"
            ". text1 ."
            ". text2 ."
            ". text3 ."
            ". text4 ."
            ". text5 ."
            ". text6 ."
            ". text7 ."
            ". rubrik ."
            ". text8 ."
            ". text9 .";
    }
}

@media only screen and (min-width: 769px) {
    #diskussionWrapper {
        height: 170vh;
        grid-template-columns: 1fr 2.5fr 2.5fr 1fr;
        grid-template-rows: 3fr 3fr 3fr 4fr 3fr 4fr 3fr 6fr 2fr;
        grid-template-areas:
            "banner banner banner banner"
            ". text1 text1 ."
            ". text2 text4 ."
            ". text3 . ."
            ". text5 text7 ."
            ". text6  text7 ."
            ". rubrik . ."
            ". text8 text9 .";
    }

    #text1 {
        text-align: center;
    }

    #text3 {
        margin-top: 1vh;
    }

    #text5, #text6, #text7 {
        margin-top: 0;
    }

    #rubrik {
        margin-bottom: 2vh;
    }

    #text8,
    #text9 {
        margin-top: 1vh;
    }
}