@font-face{
    font-family: playfair;
    src: url(../Playfair-VariableFont_opsz\,wdth\,wght.ttf);
}

header{
   display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    height:450px;
    background-image:url(../afbeeldingen/bord.png);
    background-size: cover;
    
    img:nth-child(1){
       width: 25%;
        position: absolute;
        right: 5%;
        bottom: 20%;
        border: solid;
        border-width: 5px;
        border-color: white;
        
        

    }
    article{
        width: 25%;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: normal;
        text-align: center;
        position: absolute;
        right: 5%;
        bottom: -2%;
        
        
    }
    h2{
        text-align: center;
        font-size: 150px;
        grid-row: 2/3;
        margin-top: 10px;
        color: #FDFDFB;
        font-family:playfair;
        
    }
  
   }
   body{
    background-color: #EAD7B7;
    color:#4F6D7A;
   }
   section{
    

    
    article{
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 50px 1fr 1fr;
       justify-items: center;
        
        img:nth-child(1){
            grid-column: 1/2;
            grid-row: 1/2;
            width: 70%;
            margin-left: 5%;
            margin-top: 5%;
        }
        p:nth-child(2){
            grid-column: 1/2;
            grid-row: 2/3;
            margin-left: 5%;
            margin-top: 1%;
            font-size: 18px;
             font-family: Arial, Helvetica, sans-serif;
        }
        img:nth-child(3){
            grid-column: 2/3;
            grid-row: 3/4;
            width: 70%;

        }
        

        
    
        
    }
    
img:nth-child(2){
           
            width: 25%;
            margin-left: 15%;
            margin-top: -25%;
}
   }
   main{
   
   
    article:nth-child(1) {
        text-align: center;
        
        h2{
        font-family: playfair;
        
        font-size: 100px;
        margin-top: 10%;
        }
        p{
            font-size: 30px;
            font-family: Arial, Helvetica, sans-serif;
        }
    }
    article:nth-child(2) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: 1fr;
         justify-items: center;
         text-align: center;
        margin-top: 30px;
        margin-bottom: 3%;
        font-size: 30px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        p{
            grid-column: 1/2;
            grid-row: 1/2;
            margin-top: 15%;
            
        }
     img:nth-child(1) {
        grid-column: 2/3;
        grid-row: 1/2;
        width: 55%;
        
     }
     
        
     
    }
    article:nth-child(3) {
         text-align: center;
         h2{
            font-family: playfair;
        
        font-size: 100px;
       
         }
    }
     article:nth-child(4) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 70px 1fr 1fr;
        
         
         
        
         text-align: center;
         justify-items: center;
         h3{
            font-family: playfair;
            grid-column: 1/3;
            grid-row: 1/2;
        font-size: 50px;
        
         }
         p{
            grid-column: 2/3;
            grid-row: 2/3;
           margin-top: 20%;
            font-size: 30px;
            font-family: Arial, Helvetica, sans-serif;
         }
         img{
            grid-column: 1/2;
            grid-row: 2/4;
            width:70%;
         }
       
        
    }
     article:nth-child(5) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 70px 1fr 1fr;
        margin-top: 5%;
         
         
        
         text-align: center;
         justify-items: center;
         h3{
            font-family: playfair;
            grid-column: 1/3;
            grid-row: 1/2;
        font-size: 50px;
        
         }
         p{
            grid-column: 1/2;
            grid-row: 2/3;
           margin-top: 20%;
            font-size: 30px;
            font-family: Arial, Helvetica, sans-serif;
         }
         img{
            grid-column: 2/3;
            grid-row: 2/4;
            width:70%;
         }
       
        
    }
    
        
   }
   @media only screen and (max-width:480px){ 
    
header{
   display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    img:nth-child(1){
        
        display: none;
       
    }
     article{
       display: none;
     }
   }
   section{
    

    
    article{
       display: grid;
       grid-template-columns: 1fr ;
       grid-template-rows: 1fr 50px 1fr 1fr;
       justify-items: center;
        
        img:nth-child(1){
            grid-column: 1/2;
            grid-row: 1/2;
            width: 70%;
            margin-left: 5%;
            margin-top: 5%;
        }
        p:nth-child(2){
            grid-column: 1/2;
            grid-row: 2/3;
            margin-left: 5%;
            margin-top: 1%;
            font-size: 18px;
             font-family: Arial, Helvetica, sans-serif;
        }
        img:nth-child(3){
            grid-column: 1/2;
            grid-row: 3/4;
            width: 70%;

        }
        

        
    
        
    }
    
img:nth-child(2){
           
            width: 40%;
            margin-left: 30%;
            margin-top: -25%;
}
   }
   main{
   
   
    
    article:nth-child(2) {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: 1fr 1fr;
       
        margin-top: 30px;
        margin-bottom: 3%;
        font-size: 30px;
       
        p{
            grid-column: 1/2;
            grid-row: 1/2;
            margin-top: 15%;
             margin-bottom: 20px;
            
        }
     img:nth-child(1) {
        grid-column: 1/2;
        grid-row: 2/3;
        width: 55%;
        
     }
     
        
     
    }
    
     article:nth-child(4) {
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: 70px 1fr 1fr;
        
         
         
        
         text-align: center;
         justify-items: center;
         h3{
            font-family: playfair;
            grid-column: 1/2;
            grid-row: 1/2;
        font-size: 50px;
        
         }
         p{
            grid-column: 1/2;
            grid-row: 2/3;
         ;
         }
         img{
            grid-column: 1/2;
            grid-row: 3/4;
          
         }
       
        
    }
     article:nth-child(5) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70px 1fr 1fr;
        
         
         
        
         
         h3{
            
            grid-column: 1/2;
            grid-row: 1/2;
        font-size: 50px;
        
         }
         p{
            grid-column: 1/2;
            grid-row: 2/3;
          
         }
         img{
            grid-column: 1/2;
            grid-row: 3/4;
            
         }
       
        
    }
    
        
   }
    
}