
.container{
    grid-gap: 20px;
    display: grid;
    background-color: #dbe7e3;
    font-family: 'roboto', sans-serif;
    width: 100%;
}



@media screen and (min-width:320px) {
    .container {
        grid-template-columns: auto;
    }

.Banner{
    grid-column: 1;
    grid-row: 1;
}

.Titel{
    grid-column: 1;
    grid-row: 2;
    background-color: #fbfcfc;
    font-size: 25px;
}

.Bezienswaardigheid{
    grid-column: 1;
    grid-row: 3;
}

.Uitleg{
    grid-column: 1;
    grid-row: 5;
    font-size: 12px;
    margin-right: 6.3%;
    margin-left: 6.3%;
}

.Video{
    grid-column: 1;
    grid-row: 4;
}
.Link{
    grid-column: 1;
    grid-row: 6;
    font-size: 12px;
    margin-right: 6.3%;
    margin-left: 6.3%;
}

footer{
    grid-column: 1;
    grid-row: 7;
    background-color: #fbfcfc;
    font-size: 10px;
}
.foto1{
    position: relative;
    left: 1%;
    z-index: 1;
    width: 30%;
}
.foto2{
    position: relative;
    z-index: 2;
    width: 30%;
}
.foto3{
    position: relative;
    right: 1%;
    z-index: 3;
    width: 30%;
}

.foto4{
    position: relative;
    z-index: 1;
    width: 250px;
}

.foto5{
    position: relative;
    z-index: 2;
    right: 1%;
    width: 250px;
}
}


@media screen and (min-width:1000px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }

.Banner{
    grid-column: 1 / 3;
    grid-row: 1;
}

.Titel{
    grid-column: 1 / 3;
    grid-row: 2;
    background-color: #fbfcfc;
    font-size: 35px;
}

.Bezienswaardigheid{
    grid-column: 1;
    grid-row: 3;
}

.Uitleg{
    grid-column: 2;
    grid-row: 3;
    font-size: 16px;
    margin-right: 10.5%;
    margin-left: 5%;
}

.Video{
    grid-column: 1;
    grid-row: 4;
}
.Link{
    grid-column: 2;
    grid-row: 4;
    font-size: 16px;
    margin-right: 10.5%;
    margin-left: 5%;
}

footer{
    grid-column: 1 / 3;
    grid-row: 5;
    background-color: #fbfcfc;
    font-size: 14px;
}

.foto1{
    position: relative;
    left: 1%;
    z-index: 1;
    width: 30%;
}
.foto2{
    position: relative;
    z-index: 2;
    width: 30%;
}
.foto3{
    position: relative;
    right: 1%;
    z-index: 3;
    width: 30%;
}

.foto4{
    position: relative;
    z-index: 1;
    width: 250px;
}

.foto5{
    position: relative;
    z-index: 2;
    right: 1%;
    width: 250px;
}
}

.Banner {
    text-align: center;
    padding: 10px;
}
.Titel{
    text-align: center;
    padding: 10px;
    margin-left: 6.3%;
    margin-right: 6.3%;
    font-weight: 500;
}
.Bezienswaardigheid{
    padding: 20px;
    text-align: center;
}
.Uitleg{
    padding: 20px;
}
.Video{
    padding: 20px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
}
.Link{
    padding: 20px;
}

.Link a{
    text-decoration: none;
    color: #000;
}

.Link a:hover{
    text-decoration: underline;
}

footer{
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 6.3%;
    margin-right: 6.3%;
}


