/* ==========================================================================
   Components / MIXINS
   ========================================================================== */
/*********************
  BREAKPOINTS RESPONSIVE LAYOUT
  *********************/
/* ==========================================================================
   Layout / Block Texte & Quatre Images
   ========================================================================== */
.blockjumble {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  box-sizing: border-box;
  padding: 0 25px;
}
@media (min-width: 576px) {
  .blockjumble {
    padding: 0 45px;
  }
}
@media (min-width: 760px) {
  .blockjumble {
    padding: 0 65px;
  }
}
@media (min-width: 1360px) {
  .blockjumble {
    padding: 0 120px 0 87px;
  }
}
@media (min-width: 1500px) {
  .blockjumble {
    width: 95%;
  }
}
@media (min-width: 1800px) {
  .blockjumble {
    width: 90%;
    padding: 0 200px 0 150px;
  }
}
.blockjumble {
  max-width: 1920px;
}
@media (min-width: 1000px) {
  .blockjumble {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    gap: 50px;
  }
}
@media (min-width: 1200px) {
  .blockjumble {
    gap: 60px;
  }
}
@media (min-width: 1360px) {
  .blockjumble {
    width: 90%;
  }
}
@media (min-width: 1800px) {
  .blockjumble {
    gap: 80px;
  }
}
.blockjumble-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 25px;
}
@media (min-width: 576px) {
  .blockjumble-text {
    padding: 0 20px;
    margin-bottom: 35px;
  }
}
@media (min-width: 760px) {
  .blockjumble-text {
    padding: 0 30px;
    margin-bottom: 45px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-text {
    flex-basis: 39.5%;
    width: 39.5%;
    padding: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 1000px) {
  .blockjumble-text .h2-title {
    max-width: 380px;
    margin-bottom: 40px;
  }
}
.blockjumble-text .btn {
  margin-top: 25px;
}
.blockjumble-images {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-self: stretch;
  justify-content: center;
  gap: 15px;
}
@media (min-width: 576px) {
  .blockjumble-images {
    gap: 20px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-images {
    justify-content: flex-end;
    padding: 0;
    flex-basis: 60.5%;
    width: 60.5%;
  }
}
@media (min-width: 1200px) {
  .blockjumble-images {
    gap: 29px;
  }
}
.blockjumble-images > div {
  position: relative;
  overflow: hidden;
}
.blockjumble-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1000px) {
  .blockjumble-images.moreHeight .blockjumble-topleft {
    height: 300px;
  }
}
@media (min-width: 1200px) {
  .blockjumble-images.moreHeight .blockjumble-topleft {
    height: 355px;
  }
}
@media (min-width: 1800px) {
  .blockjumble-images.moreHeight .blockjumble-topleft {
    height: 375px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-images.moreHeight .blockjumble-down {
    height: 250px;
  }
}
@media (min-width: 1200px) {
  .blockjumble-images.moreHeight .blockjumble-down {
    height: 300px;
  }
}
@media (min-width: 1800px) {
  .blockjumble-images.moreHeight .blockjumble-down {
    height: 330px;
  }
}
.blockjumble-topleft {
  width: 49%;
  flex-basis: 49%;
  height: 165px;
  align-self: flex-end;
}
@media (min-width: 576px) {
  .blockjumble-topleft {
    width: 55%;
    flex-basis: 55%;
    height: 260px;
  }
}
@media (min-width: 760px) {
  .blockjumble-topleft {
    height: 345px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-topleft {
    width: 47%;
    flex-basis: 47%;
    height: 260px;
    align-self: flex-end;
    order: 1;
  }
}
@media (min-width: 1200px) {
  .blockjumble-topleft {
    width: 50%;
    flex-basis: 50%;
    height: 310px;
  }
}
@media (min-width: 1800px) {
  .blockjumble-topleft {
    height: 370px;
  }
}
.blockjumble-topright {
  width: 45%;
  flex-basis: 45%;
  height: 100px;
  align-self: flex-end;
}
@media (min-width: 576px) {
  .blockjumble-topright {
    width: 40%;
    flex-basis: 40%;
    height: 130px;
  }
}
@media (min-width: 760px) {
  .blockjumble-topright {
    height: 180px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-topright {
    width: 48.5%;
    flex-basis: 48.5%;
    height: 150px;
    order: 0;
  }
}
@media (min-width: 1200px) {
  .blockjumble-topright {
    width: 44.5%;
    flex-basis: 44.5%;
    height: 180px;
  }
}
@media (min-width: 1800px) {
  .blockjumble-topright {
    height: 200px;
  }
}
.blockjumble-down {
  width: 90%;
  flex-basis: 90%;
  height: 150px;
}
@media (min-width: 576px) {
  .blockjumble-down {
    height: 200px;
  }
}
@media (min-width: 760px) {
  .blockjumble-down {
    height: 250px;
  }
}
@media (min-width: 1000px) {
  .blockjumble-down {
    width: 83%;
    flex-basis: 83%;
    height: 200px;
    order: 2;
  }
}
@media (min-width: 1200px) {
  .blockjumble-down {
    height: 235px;
  }
}
@media (min-width: 1800px) {
  .blockjumble-down {
    height: 255px;
  }
}
@media (min-width: 1000px) {
  .blockjumble.alignimgright {
    flex-direction: row;
  }
}
@media (min-width: 1000px) {
  .blockjumble.alignimgright .blockjumble-text {
    align-items: flex-end;
    text-align: right;
  }
}
@media (min-width: 1000px) {
  .blockjumble.alignimgright .blockjumble-text .h2-title {
    margin-left: auto;
  }
}
@media (min-width: 1000px) {
  .blockjumble.alignimgright .blockjumble-images {
    justify-content: flex-start;
  }
}
.blockjumble.alignimgright .blockjumble-images > div {
  order: 0;
}
/*# sourceMappingURL=blockjumble.css.map */