/* =========================================================
   ENTIRE COMPONENT
========================================================= */

.cis-sections {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  background: #fff;

  box-sizing: border-box;
}


/* =========================================================
   TOP HEADING WRAPPER
   INNER CONTENT MAX 1400PX
========================================================= */

.cis-main-heading-wrap {
  position: relative;

  width: 100%;
  max-width: 1400px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* =========================================================
   ALL CONTENT ROWS
========================================================= */

.cis-content-rows {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  box-sizing: border-box;
}


/* =========================================================
   EACH ROW
   ROW ITSELF STAYS FULL WIDTH
========================================================= */

.cis-content-row {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

  background: #fff;
}


/* =========================================================
   DECORATIVE BACKGROUND IMAGE

   50_image.png / 50_image_reverse.png

   DESKTOP:
   visible

   MOBILE + TABLET:
   hidden below 1024px
========================================================= */

.cis-content-row__background {
  position: absolute;

  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
}


/* Image on right */

.cis-content-row--right
.cis-content-row__background {
  object-position: right center;
}


/* Image on left */

.cis-content-row--left
.cis-content-row__background {
  object-position: left center;
}


/* =========================================================
   INNER CONTENT
   MAX WIDTH 1400PX
========================================================= */

.cis-content-row__inner {
  position: relative;

  z-index: 1;

  width: calc(100% - 48px);
  max-width: 1400px;

  margin-left: auto;
  margin-right: auto;

  min-width: 0;

  box-sizing: border-box;
}


/* =========================================================
   COLUMN SAFETY
========================================================= */

.cis-image-column,
.cis-copy-column {
  position: relative;

  z-index: 1;

  min-width: 0;

  box-sizing: border-box;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.cis-image-wrap {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 620px;

  margin-left: auto;
  margin-right: auto;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}


/* =========================================================
   MAIN ACF IMAGE
========================================================= */

.cis-image {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: auto;

  max-width: 620px;
  max-height: 620px;

  margin-left: auto;
  margin-right: auto;

  object-fit: contain;

  box-sizing: border-box;
}


/* =========================================================
   MOBILE + TABLET
   BELOW 1024PX

   - Hide decorative background PNG
   - Use solid green background
========================================================= */

@media (max-width: 1023px) {

  .cis-sections {
    background-color: #F5FBEC;
  }


  .cis-content-rows {
    background-color: #F5FBEC;
  }


  .cis-content-row {
    background-color: #F5FBEC;

    overflow: hidden;
  }


  /*
   * This is an actual <img>,
   * so display:none is required.
   */
  .cis-content-row__background {
    display: none;
  }


  .cis-main-heading-wrap {
    background-color: #F5FBEC;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

  .cis-content-row__inner {
    width: calc(100% - 80px);
  }

}


/* =========================================================
   DESKTOP
   1024PX+
========================================================= */

@media (min-width: 1024px) {

  .cis-sections {
    background-color: #fff;
  }


  .cis-content-rows {
    background-color: #fff;
  }


  .cis-content-row {
    background-color: #fff;
  }


  /*
   * Show decorative artwork again.
   */
  .cis-content-row__background {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
  }


  /*
   * Correct artwork positioning.
   */
  .cis-content-row--right
  .cis-content-row__background {
    object-position: right center;
  }


  .cis-content-row--left
  .cis-content-row__background {
    object-position: left center;
  }


  /*
   * Maximum width is 1400px.
   *
   * Keep 72px breathing room until
   * there is enough room for full 1400px.
   */
  .cis-content-row__inner {
    width: calc(100% - 144px);

    max-width: 1400px;
  }


  .cis-image-column,
  .cis-copy-column {
    min-width: 0;
  }

}


/* =========================================================
   LARGE DESKTOP

   1400px content
   + 72px left
   + 72px right
   = 1544px
========================================================= */

@media (min-width: 1544px) {

  .cis-content-row__inner {
    width: 1400px;

    max-width: 1400px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .cis-content-row__inner {
    width: calc(100% - 48px);

    max-width: 1400px;
  }


  .cis-image-wrap,
  .cis-image {
    width: 100%;

    max-width: 620px;
  }

}