/*-----MAIN----*/
  .main-page {
    min-height: 300px;
}
.main-page h1 {
    position: relative;
    top:-5%;
    left:20%;
    font-size: 3rem;
    z-index: 0;
    color: black;
}
/*---------OFERT-----*/
.offert-page {
  padding-top: 20vh;
}
#offert {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  grid-template-areas:"h2 h2 h2" "img1 img2 img3" "img4 img5 img6 ";
}

#offert .offert-img {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-radius: 60%;
}

#offert p {
  grid-area: p;
}
#offert h2 {
  grid-area: h2;
  font-weight: 700;
  font-size: 44px;
  color: black;
  margin: auto;
}
#offert .img1 {
  grid-area: img1;
  background-image: url(/img/101/thumbs/img1.jpg);
}
#offert .img2 {
  grid-area: img2;
  background-image: url(/img/104a/thumbs/img1.jpg);
}
#offert .img3 {
  grid-area: img3;
  background-image: url(/img/104b/thumbs/img1.jpg);
}
#offert .img4 {
  grid-area: img4;
  background-image: url(/img/301a/thumbs/img1.jpg);
}
#offert .img5 {
  grid-area: img5;
  background-image: url(/img/301b/thumbs/img1.jpg);
}
#offert .img6 {
  grid-area: img6;
  background-image: url(/img/402/thumbs/img1.jpg);
}

.offert-img div {
  width:100%;
  height:100%;
  background-color: black;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.offert-img a {
  text-decoration: none;
  text-transform: uppercase;
align-content: center;

}
.offert-img div:hover {
  width:100%;
  height:100%;
  background-color: black;
  opacity: 0.7;
  transition: all ease-in-out 150ms;
}
/*---FOOTER---------*/
  
.f-body {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 45vh;
}

/*----------MEDIA--------*/

@media screen and (max-width: 800px) {
  #offert {
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    grid-template-areas:"h2 h2" "img1 img2" "img3 img4" "img5 img6 ";
  }
  #offert h2 {
  font-size: 34px;
  }
  .main-page h1 {font-size: 30px;}
}

@media screen and (max-width: 460px) {
  #offert {
    grid-template-columns: 1fr;
    grid-template-areas: "h2" "img1" "img2" "img3" "img4" "img5" "img6 ";
  }
  #offert h2 {font-size: 24px; }
  .main-page h1 {font-size: 26px;}
}
@media screen and (max-height: 700px){
  .offert-page {
    padding-bottom: 20vh;
  }
}
@media screen and (max-height: 470px){
  .offert-page {
    padding-bottom: 40vh;
  }
}