/**
 * @file
 * Section styles
 */

.section {
  overflow-x: clip;
  position: relative;
  z-index: 2;
}
.section.no-grid .layout--twocol {
  display: block;
}
.section--vial_with_plant::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: -1;
  background-image: url('../../images/section/explosion-feuilles-mobile.webp');
  width: 165px;
  height: 290px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.section--petri_dishes {
  padding-top: 89px;
}
.section--petri_dishes::before {
  content: "";
  position: absolute;
  top: -170px;
  left: -93px;
  z-index: -1;
  background-image: url('../../images/section/petri_dishes.webp');
  width: 304px;
  height: 327px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media all and (min-width: 750px) {
  .section--petri_dishes::before {
    top: 0px;
  }
}

@media all and (min-width: 1000px) {
  .section--vial_with_plant::before {
    height: 882px;
    width: calc(47000vw / 1920);
    top: 20px;
    transform: none;
    background-image: url('../../images/section/explosion-feuilles.webp');
  }

  .section--petri_dishes::before {
    width: 569px;
    height: 613px;
    left: -99px;
    top: -163px;
  }
}
.section--primary {
  background-color: var(--color-brand--1);
}
.section--primary .text *{
  color: var(--color-brand--4);
}
.section--secondary {
  background-color: var(--color-secondary);
}
.section--energy {
  background-color: var(--color-energy--light);
}
.section--stress {
  background-color: var(--color-stress--light);
}
.section--digestion {
  background-color: var(--color-digestion--light);
}
.section--immunity {
  background-color: var(--color-immunity--light);
}
.section--articulations {
  background-color: var(--color-articulations--light);
}
.section--circulation {
  background-color: var(--color-circulation--light);
}
.section--thinness {
  background-color: var(--color-thinness--light);
}
.section--skin {
  background-color: var(--color-skin--light);
}
.section--oral {
  background-color: var(--color-oral--light);
}
.section--female-wellness {
  background-color: var(--color-female-wellness--light);
}
.section--comfort {
  background-color: var(--color-comfort--light);
}
.section--solar {
  background-color: var(--color-solar--light);
}
.section--house {
  background-color: var(--color-house--light);
}
.section--green_light {
  background-color: var(--color-brand--3);
}

.section--brand-5 {
  background-color: var(--color-brand--5);
}
.section__bg-image {
  width: 100%;
  height: 100%;
}