.custom-flex-grid {
    position: relative; /* Allow child absolute positioning */
    width: 100%;
}

.row {
    display: flex;
    width: 100%;
}

.cell {
  	text-align: center;
    flex: 1;
    width: 36%;
    position: relative;
  	padding: 12px 0;
}

.row-1 .cell {
    aspect-ratio: 1 / 1;
  	padding: 0;
}

.cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  	border: 16px solid #69B385;
  	border-radius: 12px;
}

.overlap {
    width: 28%;
}

.overlapping-img {
    position: absolute;
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Offset by 50% to center */
    max-width: 461px;
    height: auto;
    z-index: 2;
    pointer-events: none; /* Prevent interaction */
    transition: max-width 0.3s ease-in-out; /* Smooth scaling */
}
.header-holder {
	  width: 100% !important;
}

/* Media Query for Scaling the PNG on Smaller Screens */
@media (max-width: 1380px) {
    .overlapping-img {
        max-width: 50%; /* Scale proportionately relative to the container */
    }
	.cell img {
  	border: 12px solid #69B385;
  	border-radius: 6px;
    transition: max-width 0.3s ease-in-out; /* Smooth scaling */
  }
}
@media (max-width: 920px) {
	.cell img {
  	border: 8px solid #69B385;
  	border-radius: 6px;
    transition: max-width 0.3s ease-in-out; /* Smooth scaling */
  }
}

/* Pullquote Styling */
.pullquote {
  background-color: #69B385;
  color: white;
  padding: 50px 50px 32px;
  border-radius: 16px;
  position: relative;
  font-family: 'Proza Libre', sans-serif;
}
.quotecopy span:not(.quote) {
  display: block;          /* Forces a line break */
  height: 1em;             /* Matches the current font size */
  line-height: inherit;    /* Ensures it follows the paragraph's line height */
  width: 100%;             /* Full width to act as a true break */
  content: "";             /* Prevent any additional text or spacing */
}
.quotecopy {
  font-style: italic;
  position: relative;
  text-indent: 28px;
  font-size: 18px;
  line-height: 32px;
}
.openquote {
  text-indent: 0;
  font-size: 5em;
  position: absolute;
	left: -26px;
  top: 20px;
}
.closequote {
  text-indent: 0;
  font-size: 5em;
  position: absolute;
  bottom: -38px;
}

.interview-section {
  width: 100%; /* Full-width section */
  position: relative;
}
.interview-section p:empty {
    display: none;
}
.pullquote {
  float: right; /* Pull-quote floats to the right */
  width: 50%; /* Adjust as needed (50% might be too large) */
  margin-left: 32px; /* Space between the pull-quote and interview text */
  margin-bottom: 10px; /* Space below the pull-quote */
  box-sizing: border-box; /* Ensure padding is within the width */
}

.interview-block {
  width: 100%; /* Interview content spans full width */
  overflow: hidden; /* Clear float issues */
}

.interview-block p {
  margin-top: 0;
  margin-bottom: 1em;
}

.quotenote {
  text-indent: 0 !important;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  margin: 0;
  padding: 8px 0 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .pullquote {
    padding: 32px 32px 24px;
    border-radius: 12px;
  }
  .quotecopy {
    font-size: 16px;
    line-height: 28px;
    text-indent: 28px;
  }
  .openquote {
    text-indent: 0;
    font-size: 4em;
    left: -16px;
    top: 18px;
  }
  .closequote {
    text-indent: 0;
    font-size: 4em;
    bottom: -28px;
  }
}
@media (max-width: 768px) {
  .pullquote {
    float: none; /* Disables float on smaller screens */
    width: 100%; /* Full width */
    margin-left: 0;
    margin-bottom: 32px; /* Adds space below the quote */
  }

  .interview-block {
    width: 100%; /* Ensures interview content uses full width */
  }
}
@media (max-width: 520px) {
  .quotenote {
    font-size: 13px;
    line-height: 18px;
  }
  .pullquote {
    padding: 24px 24px 16px;
    border-radius: 10px;
  }
  .quotecopy {
    font-size: 14px;
    line-height: 26px;
    text-indent: 18px;
  }
  .openquote {
    text-indent: 0;
    font-size: 3em;
    left: -10px;
    top: 10px;
  }
  .closequote {
    text-indent: 0;
    font-size: 3em;
    bottom: -16px;
  }
}


p.caq {
  
}
.interview.er::before, .interview.ee::before {
  content: ""; /* Necessary to create the pseudo-element */
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px; /* Space between image and text */
  border-radius: 50%; /* Turns the square into a circle */
  background-size: cover; /* Ensures the image fills the circle */
  background-position: center; /* Center the image within the circle */
  float: left; /* Floats the image to the left */
  object-fit: cover; /* Ensure no distortion */
  border: solid 5px #69b385;
}

.interview.er, .interview.em {
  font-style: italic;
}

/* Optional: Make the quote scalable with container width */
@media (max-width: 600px) {
    .opening-quote, .closing-quote {
        font-size: 4rem;
    }
}