.introduction {}

.introduction-img {}

.description-title {
   margin-bottom: 2rem;
   color: var(--color-2);
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
}

@media screen and (min-width: 595px) {
   .description-title {
      width: 60%;
   }
}

@media screen and (min-width: 687px) {
   .description-title {
      width: 50%;
   }
}

/* @media screen and (min-width: 847px) {
   .description-title {
      width: 50%;
   }
} */


@media screen and (min-width: 1024px) {
   .description-title {
      width: 50%;
   }
}
@media screen and (min-width: 1255px) {
   .description-title {
      width: 40%;
   }
}

.sous-titre-description{
   width: 60%;
}

@media screen and (min-width: 370px) {
   .sous-titre-description{
      width: 80%;
   }
}

@media screen and (min-width: 1024px) {
   .sous-titre-description{
      width: 71%;
   }
}




.description {
   width: 95%;
   margin-bottom: 2rem;
}

@media screen and (min-width: 1278px) {
   .description{
      width: 80%;
   }
}

.description-image {
   width: 100%;
   height: 100%;
   max-width: 100%;
   object-fit: cover;
   margin-bottom: 2rem;
}

@media screen and (min-width: 1024px) {
   .description-image {
      width: 50%;
      margin-bottom: 0;
   }
}

@media screen and (min-width: 1400px) {
   .description-image {
      width: 50%;
      margin-bottom: 0;
   }
}

.gallery {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(14, 2rem);
   grid-gap: 10px;
   padding: 1rem;
   width: 100%;
   /* grid-auto-rows: minmax(100px, auto); */
}


@media screen and (min-width: 480px) {
   .gallery {
      grid-template-rows: repeat(14, 3rem);
   }
}

@media screen and (min-width: 1024px) {
   .gallery {
      font-size: 1.5rem;
      grid-template-rows: repeat(14, 4rem);
      grid-template-columns: repeat(10, 5rem);
      width: auto;
   }
}

.gallery-title{
   text-align: center; 
   margin-bottom: 2rem;
}

.gallerie-image {
   width: 100%;
   height: 100%;
   max-width: 100%;
   object-fit: cover;
   border-radius: 6%;
}


.categorie-title {
   position: absolute;
   margin: 0;
   left: 0;
   bottom: 0;
   color: white;
   margin-left: 0.4rem;
   font-size: 0.9rem;
   font-weight: 600;
}
@media screen and (min-width: 500px) {
   .categorie-title {
      font-size: 1.3rem;
      margin-left: 1rem;
      margin-bottom: 0.5rem;
   }
   
}

@media screen and (min-width: 767px) {
   .categorie-title {
      font-size: 1.5rem;
   }
}

.image1 {
   position: relative;
   grid-column: 1 / 6;
   grid-row: 1 / 6;
}

.image2 {
   position: relative;
   grid-column: 6/ 11;
   grid-row: 1 / 7;
}

.image3 {
   position: relative;
   grid-column: 1 / 6;
   grid-row: 6 /14;
}

.image4 {
   position: relative;
   grid-column: 6/ 11;
   grid-row: 7 / 14;
}

.form-container{
background-color: var(--color-3);
}


.form-title{
margin-top: 2rem;
}


.logo-slider{
   margin-top: 1rem
}