@font-face {
  font-family: Worksans-bold;
  src: url(/fonts/WorkSans-Bold.otf);
}

@font-face {
  font-family: Montserrat-regular;
  src: url(/fonts/Montserrat-Regular.otf);
}

@font-face {
  font-family: Montserrat-bold;
  src: url(/fonts/Montserrat-Bold.otf);
}

html, body{
    margin: 20px 50px;
    background-color: rgb(240, 240, 240);
}

.block{
  padding:20px;
  margin: auto;
  display: grid;
}

@media screen and (min-width:320px){
main {
    display: grid;
    grid-template-columns: auto;
}
    .block.banner{
        grid-row: 1;
    }
    .block.titel{
        grid-row: 2;
    }
    .block.bezienswaardigheid{
        grid-row: 3;
    }
    .block.tekst{
        grid-row: 4;
    }
    .block.video{
      grid-row: 5;
    }
    .block.lijst{
      grid-row: 6;
    }
    .block.footer{
      grid-row: 7;
    }
}

@media screen and (min-width:768px){
    main {
        display: grid;
        grid-template-columns: auto;
    }
    .block.banner{
        grid-row: 1;
    }
    .block.titel{
        grid-row: 2;
    }
    .block.bezienswaardigheid{
        grid-row: 3;
    }
    .block.tekst{
        grid-row: 4;
    }
    .block.video{
      grid-row: 5;
    }
    .block.lijst{
      grid-row: 6;
    }
    .block.footer{
      grid-row: 7;
    }
}

@media screen and (min-width:992px){
    main {
      display: grid;
      grid-template-columns:  1fr 2fr;
    }
    .block.banner{
        grid-column: 1/3;
        grid-row: 1;
    }
    .block.titel{
        grid-column: 1/3;
        grid-row: 3;
    }
    .block.bezienswaardigheid{
        grid-column: 1;
        grid-row: 4;
    }
    .block.tekst{
        grid-column: 2;
        grid-row: 4;
    }
    .block.video{
        grid-column: 1;
        grid-row: 5;
    }
    .block.lijst{
        grid-column: 2;
        grid-row: 5;
    }
    .block.footer{
        grid-column: 1/3;
        grid-row: 6;
    }
}

.container {  
  display: grid;
}

.banner {
  display: flex;
  position: relative;
  gap: 10px; 
  width: 300px;
  max-width: 100%; 
  height: 250px;
  padding: 10px; 
  justify-content: center;
}

.img {
  flex: 1; 
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.titel h2{
  padding: 2rem;
  font-size: 3rem;
  font-family: Worksans-bold;
  text-align: center;
  width: 900px;
  margin: auto;
  justify-content: center;
  border-top: 1px solid black;
}

.bezienswaardigheid{
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex: 1; 
  padding: 3em 5em;
}

.bezienswaardigheid img{
  width: 12em;
  height: auto;
}

.tekst{
  font-family: Montserrat-regular;
  font-size: 11pt;
  padding: 3em 5em;
  flex: 2;
}

.tekst p{
  margin-bottom: 2em;
}

.tekst ul{
  list-style: disc;
  padding: 1em;
}

.lijst{
  margin: 20px 60px;
  justify-content: left;
}

.video{
  padding-bottom: 3em;
}

.lijst li{
  list-style: disc;
  font-family: Montserrat-bold;
  font-size: 12pt;
  padding: 1em;
}

.footer{
  font-family: Montserrat-regular;
  font-size: 0.8em;
  border-top: 1px solid black;
  margin: 2px;
  padding: 3em;
  justify-content: center;
}