/*responsive design*/
.container{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto auto auto auto;
    grid-gap: 2em; /* witruimte tussen de blokken, efficienter dan met margin*/
}
.container .block{
    padding:20px;
    text-align:center;
}
.block.block1{
    grid-row: 1;
    grid-column:1 / span 2;
 }
.block.block2{
    background-color: #e5dcb1;
    grid-row: 2;
    grid-column:1 / span 2;
}
.block.block3{
    margin-top: 5em;
    grid-row: 3;
    grid-column: 1;
}
.block.block4{
    margin-top: 5em;
    grid-row: 3;
    grid-column: 2;
}
.block.block5{
    margin-top: 5em;
    margin-bottom: 3em;
    grid-row: 4;
    grid-column:1;
}
.block.block6{
    margin-top: 5em;
    margin-bottom: 3em;
    grid-row: 4;
    grid-column:2;
}
.block.block7{
    margin-top: 2em;
    background-color: #e5dcb1;
    grid-row: 5;
    grid-column:1 / span 2;
}


@media screen and (max-width:1024px)
{ .container{
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto auto auto auto;}
    .block.block1{
        grid-column:1;
        grid-row:1;
    }
    .block.block2{
        grid-column:1;
        grid-row:2;
    }
    .block.block3{
        grid-column:1;
        grid-row:3;
    }
    .block.block4{
        grid-column:1;
        grid-row:5;
    }
    .block.block5{
        grid-column:1;
        grid-row:4;
    }
    .block.block6{
        grid-column:1;
        grid-row:6;
    }
    .block.block7{
        grid-column:1;
        grid-row:7;
    }
}
/*responsive design*/




/*(responsive) images*/
.scalable {
    /*deze 2 lijntjes zorgen er voor dat ze scalable zijn, als de afbeelding op 100% te groot is, moet je in photoshop of dergelijke de afbeelding verkleinen */
    max-width: 100%;
    height: auto;
}
.scalable img {
    max-width: 100%;
    height: auto;
}
.imageGrid {
  display: grid;
  /* Verdeelt de ruimte gelijkmatig over 4 kolommen */
  grid-template-columns: repeat(4, 1fr); 
  /* Voeg wat ruimte toe tussen de foto's */
  gap: 15px; 
  /* Centreer de grid in de beschikbare ruimte */
  justify-content: center; 
  /* Centreer de items binnen hun cellen */
  align-items: center; 
}
.imageGrid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; 
  justify-content: center; 
  align-items: center; 
}
.imageGrid img {
  /* Zorgt ervoor dat de afbeeldingen de volledige breedte van hun grid-cel innemen */
  width: 100%; 
  /* Zorgt ervoor dat de afbeeldingen netjes geschaald worden zonder vervorming */
  height: auto; 
  /* Voeg een maximale breedte toe als je wilt voorkomen dat ze te groot worden op hele brede schermen */
  max-width: 100%; 
  /* Als je alle afbeeldingen dezelfde hoogte wilt geven, ongeacht de originele verhouding */
  object-fit: cover; 
}
.imageGrid2 img {
  width: 100%; 
  height: auto; 
  max-width: 100%; 
  object-fit: cover; 
}
/*(responsive) images*/



/*opmaak tekst*/
@font-face {
    font-family:glass;
    src: url(/fonts/Glass_Antiqua/GlassAntiqua-Regular.ttf) format('opentype');
}
@font-face {
    font-family:lexendBold;
    src: url(/fonts/Lexend/static/Lexend-Bold.ttf) format('opentype');
}
@font-face {
    font-family:lexendRegular;
    src: url(/fonts/Lexend/static/Lexend-Regular.ttf) format('opentype');
}
 h1{
    font-family: glass;
    font-size:8em;
    color: #80926f;
    padding: 0.5em;
 }
h2{
    font-family: glass;
    font-size:2.5em;
    color: #80926f;
    line-height: 1em;
 }
p{
    font-family: lexendRegular;
    font-size:1.1em;
    color:#80926f;  
}
/*opmaak tekst*/


/*andere opmaak*/
.block.block6{
    text-align: center;
    padding:5%;
    padding-top: 6%;
    line-height: 2em;
}
.block.block5{
    text-align: center;
    padding:5%;
    padding-top: 8%;
    line-height: 2em;
}
.block.block4{
    text-align: center;
    padding:5%;
    padding-top: 8%;
    line-height: 2em;
}
.block.block3{
    gap: 15px; 
    align-items: center; 
}
.button {
    background-color: #80926f;
    border: none;
    color: #dfdac2;
    padding: 15px 32px;
    margin: 15px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: lexendRegular;
    font-size: 0.9em;
  }
ul{
    list-style-type: none;
}
/*andere opmaak*/


 /* kleurenpalet
    #e5dcb1;
    #dfdac2;
    #d4d3b3;
    #80926f;
    #4e5138; */