/*
Widget Styles - MCE Two Image Split Content
*/
.mce-two-image-split-content {
  --translate-distance: 1rem;
  --animation-duration: 1s;
  --animation-easing: var(--cds-theme-global-easing);
  --animation-delay: 0.2s;
  --stacking-breakpoint: 1023px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "left right";
  min-height: 768px;
  gap: 2rem;
}
@media (max-width: 1023px) {
  .mce-two-image-split-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "left" "right";
    gap: var(--global-padding-style-rl);
  }
}
.mce-two-image-split-content .mce-two-image-split-content-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mce-two-image-split-content .mce-two-image-split-content-left__content {
  padding: 0rem 4rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mce-two-image-split-content .mce-two-image-split-content-left__content .leadin-heading {
  text-transform: uppercase;
  color: var(--cds-theme-clr-action);
  display: block;
  font-weight: var(--e-global-typography-primary-font-weight);
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: var(--cds-type-fluid-md);
  transition-delay: var(--heading-animation-delay);
}
@media (max-width: 1023px) {
  .mce-two-image-split-content .mce-two-image-split-content-left__content {
    padding-right: initial;
    padding-bottom: var(--global-padding-style-rl);
  }
}
.mce-two-image-split-content .mce-two-image-split-content-left__content .overview-label,
.mce-two-image-split-content .mce-two-image-split-content-left__content .leadin-heading,
.mce-two-image-split-content .mce-two-image-split-content-left__content h2,
.mce-two-image-split-content .mce-two-image-split-content-left__content h3,
.mce-two-image-split-content .mce-two-image-split-content-left__content .mce-two-image-split-content-left__copyblock {
  transition: all var(--animation-duration) var(--animation-easing);
  opacity: 0;
  transform: translateY(var(--translate-distance));
}
.mce-two-image-split-content .mce-two-image-split-content-left__content .mce-tracer-button {
  transition-delay: calc(var(--animation-delay) * 2);
  opacity: 0;
  transform: translateY(var(--translate-distance));
  transition: opacity var(--animation-duration) var(--animation-easing), transform var(--animation-duration) var(--animation-easing);
}
.mce-two-image-split-content .mce-two-image-split-content-left__content .overview-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cds-theme-clr-action);
  margin-bottom: 0.5rem;
}
.mce-two-image-split-content .mce-two-image-split-content-left__content h2 {
  margin-bottom: 0rem;
}
.mce-two-image-split-content .mce-two-image-split-content-left__content h3 {
  margin-bottom: 1rem;
}
.mce-two-image-split-content .mce-two-image-split-content-left__content .mce-two-image-split-content-left__copyblock {
  transition-delay: var(--animation-delay);
}
.mce-two-image-split-content .mce-two-image-split-content-left__content hr {
  width: 100%;
  max-width: 250px;
  height: 5px;
  background-color: var(--cds-theme-clr-action);
  margin-bottom: 1rem;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--animation-duration) var(--animation-easing);
}
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible .overview-label,
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible .leadin-heading,
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible h2,
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible h3,
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible .mce-two-image-split-content-left__copyblock {
  opacity: 1;
  transform: translateY(0);
}
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible .mce-tracer-button {
  opacity: 1;
  transform: translateY(0);
}
.mce-two-image-split-content .mce-two-image-split-content-left__content.visible hr {
  transform: scaleX(1);
}
.mce-two-image-split-content .mce-two-image-split-content-right {
  grid-area: right;
  position: relative;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  margin-left: auto;
}
@media (max-width: 1023px) {
  .mce-two-image-split-content .mce-two-image-split-content-right {
    min-height: 400px;
    margin-right: auto;
  }
}
@media (max-width: 923px) {
  .mce-two-image-split-content .mce-two-image-split-content-right {
    flex-direction: column;
    gap: var(--global-padding-style-rl);
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: auto;
  }
}
.mce-two-image-split-content .mce-two-image-split-content-right .main-image-container {
  position: relative;
  left: 0rem;
  z-index: 1;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 650/600;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.mce-two-image-split-content .mce-two-image-split-content-right .main-image-container.visible {
  opacity: 1;
  transform: translateY(0);
}
.mce-two-image-split-content .mce-two-image-split-content-right .main-image-container .main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
@media (max-width: 1023px) {
  .mce-two-image-split-content .mce-two-image-split-content-right .main-image-container {
    max-width: 100%;
  }
}
@media (max-width: 923px) {
  .mce-two-image-split-content .mce-two-image-split-content-right .main-image-container {
    left: 0;
    position: relative;
    z-index: 1;
  }
}
.mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container {
  position: absolute;
  bottom: 1rem;
  left: -4rem;
  width: 60%;
  max-width: 447px;
  aspect-ratio: 447/307;
  z-index: 2;
  box-shadow: 0px 0px 17px 0px rgba(132, 132, 132, 0.28);
  overflow: visible;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s;
}
.mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1023px) {
  .mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container {
    width: 55%;
    left: -4rem;
    bottom: -4rem;
  }
}
@media (max-width: 923px) {
  .mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    box-shadow: none;
  }
}
.mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container .overlapping-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.mce-two-image-split-content .mce-two-image-split-content-right .overlapping-image-container:hover .overlapping-image {
  transform: scale(1.05);
}
.mce-two-image-split-content .mce-two-image-split-content-right .main-image-container:hover .main-image {
  transform: scale(1.02);
}