/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-container {
  flex: 1 1 50%;
  max-width: 50%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.text-container {
  flex: 1 1 50%;
  max-width: 50%;
  padding: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-container h2,
.text-container h3,
.text-container h4,
.text-container p {
  margin-bottom: 1rem;
}


.image-text-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Default (image left, text right) */

section.image-text-section.image-text--image-left {
  flex-direction: row;
}

/* Reverse (image right, text left) */
section.image-text-section.image-text--image-right {
  flex-direction: row-reverse;
}

.text-container.bg-lightgreen {
  background-color: #E4EED6;
  color: #000;
}

.text-container.bg-beige {
  background-color: #D8CCBE;
  color: #000;
}


/* OUTER WRAPPER = 100% width */
.full-width-wrapper {
  width: 100%;
  background: #fff;
}



.text-container.bg-beige p, .text-container.bg-lightgreen p {
  max-width: 607px;
  font-size: 1.125rem;
}


.image-text--image-right {
  flex-direction: row-reverse;
}

/* 7. RESPONSIVE:  ON MOBILE */
@media (max-width: 768px) {
  .image-text-section {
    flex-direction: column;
  }

  .section p {
    font-size: 1.125rem;

  }

  .text-container {
    padding: 1rem;
  }

  .image-container,
  .text-container {
    max-width: 100%;
    height: 470px;
    flex: 1 1 100%;
  }

}

.text-container.bg-lightgreen .text {
  margin-left: 12rem;
}

@media (max-width: 430px) {
  .text-container.bg-lightgreen .text {
    margin-left: 0;
  }
}