@media screen and (min-width:401px) {

    .wrapper {
        max-width: 800px;
    }
    
    section, .introduction p {
        margin: 0;
    }

    .button__readmore {
        display: none;
    }

    .button__menu {
        width: 75%;
    }


    /* TEXT */

    h1 {
        padding: 10px 7.5%;
    }


    /* MAIN */

    main {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
        column-gap: 5%;
        margin: 20px 7.5% 0;
    }

    .map {
        height: 320px;
        margin: 0;
    }
    figcaption {
        display: block;
    }

    footer {
        padding: 1.3em 0 2.2em;
        margin-top: 100px;
    }

    .xtra_txt {
        display: block;
    }


    /* FORSIDE */

    #forside #afsnit1 {
        grid-column: 1/2;
    }

    #forside #afsnit2 {
        grid-column: 2/3;
    }

    #forside #afsnit3 {
        grid-column: 1/3;
    }
    #forside #afsnit3 .button__link {
        max-width: 320px;
        margin: 20px auto 0;
    }

    #forside #afsnit4 {
        grid-column: 1/3;
        max-width: 500px;
        margin: 0 auto;
    }

    #forside #afsnit5 {
        grid-column: 1/3;
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5%;
    }
    #forside #afsnit5 ul {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #forside #afsnit5 .map {
        grid-column: 2/3;
        grid-row: 2/3;
    }


    /* OPLEVELSER FRA ELEVER */

    #oplevelser #afsnit1 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit2 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit3 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit4 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit5 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit6 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit7 {
        grid-column: 1/3;
    }

    #oplevelser #afsnit8 {
        grid-column: 1/3;
    }

    .video__container {
        max-width: 800px;
    }


    .elev {
        display: grid;
        column-gap: 2.5%;
    }

    .elev1, .elev3 {
        grid-template-columns: 2fr 3fr;
    }
    .elev1 .elev__text, .elev3 .elev__text {
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .elev1 .elev__img, .elev3 .elev__img {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .elev2, .elev4 {
        grid-template-columns: 2fr 1fr;
    }
    .elev2 .elev__img, .elev4 .elev__img {
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .elev2 .elev__text, .elev4 .elev__text {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .elev__text {
        align-self: end;
    }
    .elev__img {
        margin: 0;
    }

    .elev p {
        margin: 0;
    }



    /* DIN FREMTIDIGE KARRIERE */

    #karriere #afsnit1 {
        grid-column: 1/3;
    }
    #karriere #afsnit2 {
        grid-column: 1/3;
    }
    #karriere #afsnit3 {
        grid-column: 1/3;
    }
    #karriere #afsnit4 {
        grid-column: 1/3;
    }
    #karriere #afsnit5 {
        grid-column: 1/3;
    }
    #karriere #afsnit6 {
        grid-column: 1/3;
    }
    #karriere #afsnit7 {
        grid-column: 1/3;
    }



    /* ANSØGNING */

    #ansoegning #afsnit1 {
        grid-column: 1/3;
    }
    #ansoegning #afsnit2 {
        grid-column: 1/3;
    }
    #ansoegning #afsnit3 {
        grid-column: 1/2;
    }
    #ansoegning #afsnit4 {
        grid-column: 2/3;
    }
    #ansoegning #afsnit5 {
        grid-column: 1/3;
    }

    #ansoegning #afsnit6 {
        grid-column: 1/3;
    }
    #ansoegning #afsnit6 {
        grid-column: 1/3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        column-gap: 5%;
    }
    #ansoegning h3 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #ansoegning #afsnit6 ul {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #ansoegning #afsnit6 .map {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #ansoegning #afsnit7 {
        grid-column: 1/3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        column-gap: 5%;
    }
    #ansoegning #afsnit7 h2 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #ansoegning #afsnit7 p {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #ansoegning #afsnit7 div:first-of-type {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #ansoegning #afsnit7 div:last-of-type {
        grid-column: 2/3;
        grid-row: 2/3;
    }
    


    /* MERE OM UDDANNELSEN */

    #mereom #afsnit1 {
        grid-column: 1/3;
    }
    #mereom #afsnit2 {
        grid-column: 1/3;
    }
    #mereom #afsnit3 {
        grid-column: 1/3;
    }
    #mereom #afsnit4 {
        grid-column: 1/3;
    }
    #mereom #afsnit5 {
        grid-column: 1/3;
    }

    #mereom #afsnit6 {
        grid-column: 1/3;
    }
    .fakta__moduler {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2.5%;
    }
    .fakta__moduler__grund {
        grid-column: 1/2;
    }
    h2.fakta__moduler__grund {
        grid-row: 1/2;
    }
    ul.fakta__moduler__grund {
        grid-row: 2/3;
    }
    .fakta__moduler__hoved {
        grid-column: 2/3;
    }
    h2.fakta__moduler__hoved {
        grid-row: 1/2;
    }
    ul.fakta__moduler__hoved {
        grid-row: 2/3;
    }
    a.fakta__moduler__hoved {
        grid-row: 2/3;
        align-self: end;
    }

    #mereom #afsnit7 {
        grid-column: 1/2;
    }
    #mereom #afsnit8 {
        grid-column: 2/3;
    }
}




@media screen and (min-width:801px) {

    .wrapper {
        max-width: 1000px;
    }

    /* NAV / MENU */

    header {
        margin-top: 60px;
    }
    nav {
        height: 60px;
    }

    .menu {
        max-width: 1000px;
        height: 60px;
        padding: 0 50px;
    }

    .menu__links {
        display: flex;
        max-width: 1000px;
        width: 100%;
        height: 0;
        /* height: 350px; */
        overflow: hidden;

        position: fixed;
        top: 60px;
        left: 0;
        right: 0;

        border: 0;
        border-radius: 15px;
        border: solid 2px #C686C1;
        box-shadow: 0 0 10px #000a;

        padding: 0 2em;
        margin: 0 auto;

        opacity: 0;
        gap: 0;
        transition: height 0.5s, gap, 0.5s, opacity 0.2s;
    }
    .menu__links.active {
        height: 350px;
        gap: 25px;
        opacity: 1;
    }

    .button__menu {
        width: 100%;
    }

    .burger {
        display: none;
    }

    .dropdown {
        display: block;
    }

    /* MAIN */

    main {
        margin: 20px 10% 0;
    }

    .map {
        height: 375px;
    }

    footer {
        padding: 2.1em 0;
    }

    /* FORSIDE */

    #forside #afsnit1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    #forside #afsnit2 {
        grid-column: 2/3;
        grid-row: 2/3;
        align-self: start;
        margin-top: 45px;
    }

    #forside #afsnit3 {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #forside #afsnit3 .button__link {
        max-width: unset;
        margin: 20px auto 0;
    }

    #forside #afsnit4 {
        grid-column: 1/3;
        grid-row: 3/4;
        max-width: 500px;
        margin: 0 auto;
    }
    
    #forside #afsnit5 {
        grid-column: 1/3;
        grid-row: 4/5;
        column-gap: 6.25%
    }


    /* OPLEVELSER FRA ELEVER */

    #oplevelser #afsnit1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    #oplevelser #afsnit2 {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #oplevelser #afsnit3 {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #oplevelser #afsnit4 {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    #oplevelser #afsnit5 {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #oplevelser #afsnit6 {
        grid-column: 1/3;
        grid-row: 4/5;
    }

    #oplevelser #afsnit7 {
        grid-column: 1/2;
        grid-row: 5/6;
    }

    #oplevelser #afsnit8 {
        grid-column: 2/3;
        grid-row: 5/6;
    }

    .elev {
        display: block;
    }
    .elev__img {
        margin-bottom: 20px;
    }

    .video__container {
        max-width: 1000px;
    }


    /* DIN FREMTIDIGE KARRIERE */

    #karriere #afsnit1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #karriere #afsnit2 {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #karriere #afsnit3 {
        grid-column: 2/3;
    }

    #karriere #afsnit4 {
        grid-column: 2/3;
        grid-row: 3/4;
        margin-top: 80px;
    }
    #karriere #afsnit5 {
        grid-column: 1/2;
        grid-row: 3/4;
    }
    #karriere #afsnit6 {
        grid-column: 1/2;
        grid-row: 4/5;
        margin-top: 45px;
    }
    #karriere #afsnit7 {
        grid-column: 2/3;
        grid-row: 4/5;
    }



    /* ANSØGNING */

    #ansoegning #afsnit1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #ansoegning #afsnit2 {
        grid-column: 1/2;
        grid-row: 2/4;
    }
    #ansoegning #afsnit3 {
        grid-column: 2/3;
        grid-row: 2/3;
        align-self: start;
        margin-top: 45px;
    }
    #ansoegning #afsnit4 {
        grid-column: 2/3;
        grid-row: 3/6;
        align-self: start;
    }
    #ansoegning #afsnit5 {
        grid-column: 1/2;
        grid-row: 4/6;
    }

    #ansoegning #afsnit6 {
        grid-column: 1/3;
        grid-row: 6/7;
    }
    #ansoegning #afsnit6 {
        grid-column: 1/3;
        column-gap: 6.25%;
    }
    #ansoegning h3 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #ansoegning #afsnit6 ul {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #ansoegning #afsnit6 .map {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #ansoegning #afsnit7 {
        grid-column: 1/3;
        grid-row: 7/8;
        column-gap: 6.25%;
    }



    /* MERE OM UDDANNELSEN */

    #mereom #afsnit1 {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    #mereom #afsnit2 {
        grid-column: 1/2;
        grid-row: 2/7;
    }
    #mereom #afsnit3 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin-top: 45px;
    }
    #mereom #afsnit4 {
        grid-column: 2/3;
        grid-row: 3/9;
    }
    #mereom #afsnit6 {
        grid-column: 1/2;
        grid-row: 7/9;
        align-self: end;
    }

    #mereom #afsnit5 {
        grid-column: 1/3;
        grid-row: 9/10;
    }
    .fakta__moduler {
        display: block;
    }

    #mereom #afsnit7 {
        grid-column: 1/2;
        grid-row: 10/11;
    }
    #mereom #afsnit8 {
        grid-column: 2/3;
        grid-row: 10/11;
    }
}