.image-text {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  justify-content: center;

  padding-bottom: 64px;

}
.image-text__image {
  display: grid;
  justify-content: center;
}
[class*="image-text__content--"] {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: fit-content;
}

.section:not(:has(.grid-row)) .image-text .image-text__content {
  padding: 0 20px;
}

.image-text__text {
  text-align: center;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-wrap: anywhere;
}

.image-text__text h2,
.image-text__text h3,
.image-text__text  p {
  margin : 0;
}

.image-text__text h3,
.image-text__text  p {
  color: var(--color-neutral--1);
}



.image-text__link {
  display: flex;
  justify-content: center;
  height: fit-content;
  padding: 24px 0;
}

.image-text__link .cta {
  font-family: var(--font-condensed);
}

@media all and (min-width: 1000px) {
  .image-text__content {
    align-self: center;
  }
  .image-text--30-70 .image-text__image,
  .image-text--40-60 .image-text__image {
    justify-content: end;
  }
  .image-text--30-70.image-text--right .image-text__image,
  .image-text--40-60.image-text--right .image-text__image {
    justify-content: start;
  }
  .image-text--30-70 .image-text__image,
  .image-text--40-60 .image-text__image {
    grid-area: a;
  }
  .image-text--30-70 .image-text__content,
  .image-text--40-60 .image-text__content {
    grid-area: b;
    align-items: start;
  }
  .image-text--30-70 {
    grid-template-areas: "a b";
    grid-auto-columns: calc(30% - .75rem) calc(70% - .75rem);
    gap: 1.5rem;
  }
  .image-text--40-60 {
    grid-template-areas: "a b";
    grid-auto-columns: calc(40% - .75rem) calc(60% - .75rem);
    gap: 1.5rem;
  }
  .image-text--right.image-text--40-60 {
    grid-template-areas: "b a";
    grid-auto-columns: calc(60% - .75rem) calc(40% - .75rem);
  }
  .image-text--right.image-text--30-70 {
    grid-template-areas: "b a";
    grid-auto-columns: calc(70% - .75rem) calc(30% - .75rem);
  }
}
@media all and (min-width: 1100px) {
  .image-text--50-50 .image-text__image {
    justify-content: start;
  }
  .image-text--50-50.image-text--right .image-text__image {
    justify-content: end;
  }
  .image-text--50-50 .image-text__image {
    grid-area: a;
  }
  .image-text--50-50 .image-text__content {
    grid-area: b;
    align-items: start;
  }
  .image-text--50-50 {
    grid-template-areas: "a b";
    grid-auto-columns: calc(50% - .75rem);
    gap: 0;
    align-items: center;
  }
  .image-text--right.image-text--50-50 {
    grid-template-areas: "b a";
  }

  .section:not(:has(.grid-row)) .image-text  {
    padding: 64px 0 192px;
    width: 82%;
    margin: 0 auto;
    max-width: 1400px;
  }

  .section:not(:has(.grid-row)) .image-text .image-text__content,
  .image-text__content {
    padding : 32px 79px;
  }

  .image-text__text {
    padding: 0;
    gap: 0px;
    text-align: start;
  }

  .image-text__text h2,
  .image-text__text p:last-child {
    padding-bottom: 32px;
  }

  .image-text__text h3 {
    padding-bottom: 8px;
    color: var(--color-brand--1);
  }

  .image-text__link {
    justify-content: flex-start;
  }
}


/**
 * background color
 */
.image-text__content--primary {
  background-color: var(--color-brand--4);
}
.image-text__content--secondary {
  background-color: var(--color-secondary);
}
.image-text__content--energy {
  background-color: var(--color-energy--light);
}
.image-text__content--stress {
  background-color: var(--color-stress--light);
}
.image-text__content--digestion {
  background-color: var(--color-digestion--light);
}
.image-text__content--immunity {
  background-color: var(--color-immunity--light);
}
.image-text__content--articulations {
  background-color: var(--color-articulations--light);
}
.image-text__content--circulation {
  background-color: var(--color-circulation--light);
}
.image-text__content--thinness {
  background-color: var(--color-thinness--light);
}
.image-text__content--skin {
  background-color: var(--color-skin--light);
}
.image-text__content--oral {
  background-color: var(--color-oral--light);
}
.image-text__content--female-wellness {
  background-color: var(--color-female-wellness--light);
}
.image-text__content--comfort {
  background-color: var(--color-comfort--light);
}
.image-text__content--solar {
  background-color: var(--color-solar--light);
}
.image-text__content--brand-5 {
  background-color: var(--color-brand--5);
}