.bg-image {

  /* Add the blur effect */
  filter: blur(0px);
  -webkit-filter: blur(0px);
  
  width:  80%;
  grid-column: 2 / span 2;
  grid-row:   1 / span 2;
}

.bg-image > img{
  width: 100%;
  opacity: 0.6;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  text-align: center;
  font-size: +1.5em;
  margin-left: 5px;
  margin-right: 5px;

  grid-column: 1 / span 2;
  grid-row:   2 / span 2;
/*  min-height: 130px;
*/
  opacity: 2;
}

.services-content_gen{
    display: grid;
    border: 3px dotted grey;
    margin: 5px 10px 5px 10px;
}

.avis{
    display: grid;
    padding:  0% 10% 0% 10%;
    grid-template-columns: 33% 33% 33%;
    margin-bottom:  4em;
}


.services-content1{
     grid-column: 1;   
}
.services-content2{
     grid-column: 2;   
}
.services-content3{
     grid-column: 3;   
}


.services-content_gen:hover{
    background-color: #76b38f;
    background-color: grey;
}

/* Small size screen */
@media screen and (max-width: 800px){
    .avis{
        grid-template-columns: 50% 50%;
    }
    .services-content_gen{
        grid-template-columns: 67% 30%;
        grid-template-rows: maxcontent maxcontent;
    }
    .services-content3{
        grid-column: 1;  
        grid-row:  2; 
    }
    .bg-image {
      width:  100%;
      grid-column: 2 / span 1;
    }
    .bg-text {
      grid-column: 1 / span 1;
      grid-row:   2 / span 1;
        font-size: +0.8em;
    }
  }

/* Large size screen */
@media screen and (min-width: 800px){
  .services-content_gen{
      grid-template-columns: 60% 20% 20%;
      grid-template-rows: maxcontent maxcontent maxcontent;
  }
}