


.opening-overlap{
  max-width: var(--wp--style--global--content-size);
  margin: -100px auto 0;
  position: relative;
  z-index: 5;
}
.opening-bottom-overlap{
  margin-bottom: -80px;
  position: relative;
  z-index: 5;
}
.opening-page-split main{
  width:100%;
  padding: none;
  margin-bottom: 100px;
}
.opening-drop-shadow main{
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.opening-page-split .inner {
    max-width: var(--wp--style--global--content-size);
    padding: 0 40px 80px;
    margin: 0 auto;
}
.opening-page-split.opening-bottom-overlap .inner {
    max-width: var(--wp--style--global--content-size);
    padding: 0 40px 0;
    margin: 0 auto;
}

/* CSS */
.container-split {
  display: flex;
  align-items: stretch;   /* ensures children stretch to same height */
  flex-wrap: nowrap;
  min-height: 500px;      /* MINIMUM height for the whole split */
  width: 100%;
}

/* 50/50 columns */
.split-image,
.split-content {
  flex: 1 1 50%;
  box-sizing: border-box;
}

/* Text side styling */
.split-content {padding: 80px 60px;}

/* Make the image column stretch and the <picture> fill it */
.split-image {
  display: flex;          /* lets picture and img stretch vertically */
  overflow: hidden;       /* hide any overflow when object-fit crops image */
}

/* Make picture fill available height and width */
.split-image picture {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;          /* allow it to shrink properly in Flexbox */
}

/* Make the image scale to fill the column height while maintaining aspect ratio */
.split-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop if necessary without distortion */
  object-position: center;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
  .container-split {
    flex-direction: column;
    min-height: 0;        /* allow natural height when stacked */
  }

    .split-image {
      flex: 0 0 auto;
      width: 100%;
      padding: 50px 30px 0px;
    }


  .split-content {
    flex: 0 0 auto;
    width: 100%;
    padding: 50px 30px;
  }

  /* let image become natural height on narrow screens */
  .split-image img {
    height: auto;
    max-width: 100%;
  }
}





