.main-container {
    margin-left:100px;
    margin-right:100px;
    margin-top:70px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 2fr 1fr 1fr ;
    grid-template-rows: auto auto auto auto auto auto 150px;
    /*grid-auto-flow: dense;*/
    grid-template-areas:
    "header-info header-info header"
    "info info info"
    "gal gal gal"
    "nachinfo nachinfo nachinfo"
    "bussbekenntnis bussbekenntnis bussbekenntnis"
    "gemeindebrief gemeindebrief gemeindebrief"
    "footer footer footer";
}

@media screen and (max-width: 1028px){
    .main-container {
        margin-left:20px;
        margin-right:20px;
        margin-top:70px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        /*grid-auto-flow: dense;*/
        grid-template-areas:  
        "header header"
        "header-info header-info"
        "info info"
        "gal gal"
        "nachinfo nachinfo"
        "bussbekenntnis bussbekenntnis"
        "gemeindebrief gemeindebrief"
        "footer footer";
    }

}


.main-container > div {
    background: transparent;
}


.header {
    grid-area: header;
}
.header-info {
    grid-area: header-info;
    text-align:right;
}
.info {
    grid-area: info;
}
.gal {
    grid-area: gal;
}
.nachinfo {
    grid-area: nachinfo;
}
.bussbekenntnis {
    grid-area: bussbekenntnis;
}
.gemeindebrief {
    grid-area: gemeindebrief;
}
.footer {
    grid-area: footer;
}


.gal-container {
    /*margin-top:70px;*/
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
}

.horizontal {
    grid-column: span 2;
}

.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}