.wrapper {
  display: grid;
  grid-gap: 10px;
  margin: 40px auto 0 auto;  
}
.TextMaire, .bienvenue {
  padding: 20px 20px 0 20px;
  color: #303030;
  font-size: 15px;
  text-align: justify !important;
}
.PicMaire {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bienvenue {
  padding-top: 0;
  margin-bottom: 40px; 
}
.bienvenue p {
  line-height: 1.8rem;
  text-align: justify !important;
  width: 100% !important; 
}
section hr {
  display: block;
  border-top: 1px solid #B2A277;
}
.card-body {
  position: absolute;
  bottom: 0;
  background-color: rgb(178,162,119, 0.7);
  color: white;
  border-top: 1px solid #303030;
  width: 100%;
  padding: 0.5rem !important;
  text-transform: uppercase;
}
.card:hover, .card:hover > .card-body {
  background-color: rgb(48,48,48, 0.8);
  color: white;
  width: 100%;
  cursor: pointer;
}
/*important so that all the images are the same size & contained in cards*/
.carousel-musee > .carousel-item > img, .card > img { 
  max-height: 170px;
  object-fit: cover ;
}
/*----modal displayed on boutique card click----*/
#modalBoutique {
  background-color: transparent !important;
  margin-top: 10%;
}
.modal-header-store h4 {
  color: #303030;
  display: block !important;
  background-color: white !important;
}
.modal-content-store {
  background-color: #fff !important;
}
/*------------------------------------MEDIA QUERIES------------------------*/
@media (min-width: 767px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    grid-auto-rows: minmax(10px, auto);
  }
  .maquettes {
    grid-column: 1/3;
    grid-row: 1/3;
  }
  .visite { 
    grid-column: 1/2;
    grid-row: 3;
  }
  .bateaux {
    grid-column: 2/3;
    grid-row: 3;
  }
  .historique {
    grid-column: 1/2;
    grid-row: 4;
  }
  .salle {
    grid-column: 2/3;
    grid-row: 4;
  }
  .contact {
    grid-column: 1/2;
    grid-row: 5;
  }
  .boutique {
    grid-column: 2/3;
    grid-row: 5;
  }
  .maire {
    grid-column: 1/3;
    grid-row: 6;
  }
  .bienvenue {
    grid-column: 1/3;
    grid-row: 7;
  }
  .PicMaire {
    margin-top: 17px;
    width: 200px;
  }
  .TextMaire h5 {
    text-align: left !important;
    width: 90%;
    margin: auto;
  }
  .TextMaire p {
    font-size: 16px;
  }
  .maquettes .carousel-musee > .carousel-item > img {
    max-height: 300px;
  }
}
/*------------------MEDIA 990--------------------*/
@media (min-width: 990px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    grid-auto-rows: minmax(10px, auto);
  }
  .maquettes {
    grid-column: 1 / 3;
    grid-row: 1/2;
  }
  .visite { 
    grid-column: 1/2;
    grid-row: 2;
  }
  .bateaux {
    grid-column: 2/3;
    grid-row: 2;
  }
  .historique {
    grid-column: 1/2;
    grid-row: 3;
  }
  .salle {
    grid-column: 2/3;
    grid-row: 3;
  }
  .contact {
    grid-column: 1/2;
    grid-row: 4;
  }
  .boutique {
    grid-column: 2/3;
    grid-row: 4;
  }
  .maire {
    grid-column: 3;
    grid-row: 1/5;
    max-height: 830px; /*So that cards & text have the same height*/
    overflow-y: hidden;
    padding: 0 30px;
    /*overflow: scroll;*/
  }
  .bienvenue {
    grid-column: 1/4;
    grid-row: 5;
    padding-top: 40px;
  }
  .PicMaire {
    grid-column: 1;
    grid-row: 1/3; 
    margin-top: 0;
    width: 150px;
  }
  .TextMaire {
    grid-column: 1;
    grid-row: 3/4;
    font-size: 13px;
    padding: 0;
  }
  .TextMaire h5 {
    text-align: center !important;
  }
  .carousel-musee > .carousel-item > img, .card > img { 
    max-height: 170px;
    object-fit: cover;
  }
}
/*-----------------MEDIA 1200---------------------*/
@media (min-width: 1200px) {
  .maire {
    padding: 0px 24px;
  }
  .PicMaire {
    grid-column: 1;
    grid-row: 1; 
  }
  .TextMaire {
    grid-column: 1;
    grid-row: 2; 
    font-size: 14.4px;
  }
}