.split-extend {
  width: 100%;
  /* distance from the centered inner container to the viewport edge */
  --bleed: calc(50vw - 50%);
}
.split-extend-inner {
  max-width: 1290px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 4em;
}
.split-extend--left .split-extend-inner {
  flex-direction: row;
}
.split-extend--right .split-extend-inner {
  flex-direction: row-reverse;
}

/* Contained widths — these set the inner edge next to the content */
.split-extend-media {
  flex: 0 0 calc((100% - 4em) * (1 - var(--content-width-fraction, 0.55)));
  max-width: calc((100% - 4em) * (1 - var(--content-width-fraction, 0.55)));
}
.split-extend-content {
  flex: 0 0 calc((100% - 4em) * var(--content-width-fraction, 0.55));
  max-width: calc((100% - 4em) * var(--content-width-fraction, 0.55));
  align-self: center; 
  padding: 3em 0 1em 0; 
}

/* Extend the image on the OUTER side: grow its width by the gutter
   and pull it out with a matching negative margin, so the inner
   edge stays put next to the content. */
.split-extend--left .split-extend-media,
.split-extend--right .split-extend-media {
  flex: 0 0 calc((100% - 4em) * (1 - var(--content-width-fraction, 0.55)) + var(--bleed));
  max-width: calc((100% - 4em) * (1 - var(--content-width-fraction, 0.55)) + var(--bleed));
}
.split-extend--left .split-extend-media  { margin-left:  calc(-1 * var(--bleed)); }
.split-extend--right .split-extend-media { margin-right: calc(-1 * var(--bleed)); }

.split-extend-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.split-extend-headline-group {
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.split-extend-headline {
  display: inline-block;
  width: auto !important;
  max-width: 100% !important;
}
.split-extend-headline h1,
.split-extend-headline h2,
.split-extend-headline h3 {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0;
  text-transform: uppercase;
}
.split-extend-divider {
  width: 100%;
  height: 2px;
  background-color: #A7AD37 !important;
  margin: 0.5em 0 0 0;
}
.split-extend-body { margin-top: 1.14rem; }
.split-extend-button-wrap { margin: 20px 0; }

@media screen and (max-width: 1290px) {
 .split-extend-inner {
    flex-direction: column !important;
    align-items: center;
    gap: 1.5em;
   padding-top: 0;
  }
  .split-extend-media img { height: auto; object-fit: initial; }
  .split-extend--left .split-extend-media,
  .split-extend--right .split-extend-media,
  .split-extend-content {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding: 0;
  }
  .split-extend--left .split-extend-media,
  .split-extend--right .split-extend-media {
    max-width: 100%;
  }

  /* LEFT side: normal = image top, reverse = content top */
  .split-extend--left[data-mobile-stack="normal"]  .split-extend-media   { order: 1; }
  .split-extend--left[data-mobile-stack="normal"]  .split-extend-content { order: 2; }
  .split-extend--left[data-mobile-stack="reverse"] .split-extend-media   { order: 2; }
  .split-extend--left[data-mobile-stack="reverse"] .split-extend-content { order: 1; }
  /* RIGHT side: flipped — normal = content top, reverse = image top */
  .split-extend--right[data-mobile-stack="normal"]  .split-extend-media   { order: 2; }
  .split-extend--right[data-mobile-stack="normal"]  .split-extend-content { order: 1; }
  .split-extend--right[data-mobile-stack="reverse"] .split-extend-media   { order: 1; }
  .split-extend--right[data-mobile-stack="reverse"] .split-extend-content { order: 2; }

  .split-extend-headline-group {
    display: block;
    width: fit-content;
  }
  .split-extend-divider {
    width: 100%;
    margin: 0.5em auto 0;
  }
}
}