.mainbackground
{
    background:#1b365e; 
    color:white; 
}

.geberitfrontpage {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    max-width: 1400px;
    margin-top: 2em;
    margin-bottom: 2em;
    justify-content: center;
}

.banner-sidebar {
    margin-bottom: 2em;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.sidebar-img {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 440px;
    height: 133px;
    padding-left: 440px;
}

.badevaerlse-img {
    background: url(/images/440/440/geberit-badevaelse-banner-hor.png) no-repeat;
}

.installation-img {
    background: url(/images/440/440/geberit-installation-banner-hor.png) no-repeat;
}

.geberit-slider marquee a {
    margin: 0.5em;
} 


@media screen and (min-width: 895px) {
    .sidebar-img {
        margin: none;
    }

    /*  GRID CONTAINER  */

    #geberit-kategorier {
        grid-area: kategorier;
    }

    #banner-badevaerlse {
        grid-area: badevaerlse;
    }

    #banner-installation {
        grid-area: installation;
    }

    #front-grid-container {
        display: grid;
        grid-column-gap: 2em;
        grid-template-areas: 
        ". kategorier kategorier kategorier kategorier. "
        ". . badevaerlse installation . .";
    }

    /*  GRID CONTAINER  */
}


@media screen and (min-width: 1420px) {
    .sidebar-img {
        width: 600px;
        height: 200px;
        padding-left: 600px;
    }
    
    .badevaerlse-img {
        background: url(/images/600/200/geberit-badevaelse-banner-hor.png) no-repeat;
    }

    .installation-img {
        background: url(/images/600/200/geberit-installation-banner-hor.png) no-repeat;
    }

    .banner-sidebar {
        max-width: 600px;

    }

    /*  GRID CONTIANER  */

    .geberitfrontpage {
        display: grid;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
        justify-content: none;
        max-width: none;
        margin: none;
        grid-template-areas: 
        "toiletter haandvaske bruseniche"
        "installation forsyning aflob"
        "vaerktoj vaerktoj vaerktoj";
    }

    #catToiletter {
        grid-area: toiletter;
    }

    #catHaandvaske {
        grid-area: haandvaske;   
    }

    #catBruseniche {
        grid-area: bruseniche;
    }

    #catInstallation {
        grid-area: installation;
    }    

    #catForsyning {
        grid-area: forsyning;
    }

    #catAflob {
        grid-area: aflob;
    }

    #catVaerktoj {
        grid-area: vaerktoj;
    }

    /*  GRID CONTIANER  */

    .last-cat-img {
        background: url(/images/1352/191/varktoj-long.png) no-repeat;
        width: 1352px;
        height: 191px;
        padding-left: 1352px;
    }

}

@media screen and (min-width: 1852px) {
    .sidebar-img {
        width: 180px;
        height: 605px;
        padding-left: 180px;
    }

    .banner-sidebar {
        margin-top: 2em;
    }
    
    .badevaerlse-img {
        background: url(/images/180/605/geberit-badevaelse-banner-ver-small.png) no-repeat;
    }

    .installation-img {
        background: url(/images/180/605/geberit-installation-banner-ver-small.png) no-repeat;
    }

    /*  GRID CONTAINTER  */

    #front-grid-container {
        padding: 0em 2em 0em 2em;
        grid-column-gap: 2em;
        grid-template-areas: 
        "badevaerlse kategorier installation";
    }

    #banner-badevaerlse {
        justify-self: end;
    } 

    #banner-installation {
        justify-self: start;
    }

    /*  GRID CONTAINER  */
}

@media screen and (min-width: 2150px) {
    .sidebar-img {
        width: 335px;
        height: 605px;
        padding-left: 335px;
    }
    
    .badevaerlse-img {
        background: url(/images/335/605/geberit-badevaelse-banner-ver-big.png) no-repeat;
    }

    .installation-img {
        background: url(/images/335/605/geberit-installation-banner-ver-big.png) no-repeat;
    }

    #front-grid-container {
        grid-template-areas: 
        ". badevaerlse kategorier installation .";
    }
}