.maeveport-dual-pane-text-container {
  display: flex;
  max-width: 1200px; /* Or any other max-width you prefer */
  margin: 0 auto; /* Center the component horizontally */

  padding: 4rem 2rem; /* Add some padding around the component */
  gap: 4rem; /* Space between left and right panes */
  align-items: flex-start; /* Align items to the start of the cross axis */
  background-color: #fff; /* Ensure component has its own background */
  position: relative; /* Added for stacking context */
  z-index: 1; /* Added to ensure it's above the background panel */
}

.maeveport-dual-pane-text-left-pane {
  flex: 1 1 45%; /* Flex properties for sizing */
  display: flex;
  flex-direction: column;
}

.maeveport-dual-pane-text-right-pane {
  flex: 1 1 50%; /* Flex properties for sizing */
  margin-top: 12rem; /* Increased offset for the right pane downwards */
  opacity: 0; /* Initial state for animation */
  transform: translateY(50px); /* Initial state for animation */
  will-change: transform, opacity;
}

.maeveport-dual-pane-text-line {
  font-size: var(
    --font-size-display-md
  ); /* Default size, matches scroll-text default */
  font-weight: 400; /* Bolder font for emphasis */
  color: #000;
  line-height: 1.2;
  margin-bottom: 0.5rem; /* Spacing between lines */
  margin-top: 0;
  opacity: 0; /* Initial state for GSAP animation */
  transform: translateY(80px); /* Initial state for GSAP animation */
  will-change: transform, opacity;
}

.maeveport-dual-pane-text-right-pane p {
  font-size: var(
    --font-size-body-md
  ); /* Default size, matches webring card text default */
  line-height: 1.6;
  color: #333;
  margin-bottom: 1.5rem;
}

.maeveport-dual-pane-text-read-more-link {
  display: inline-block;
  font-size: var(
    --font-size-body-md
  ); /* Default size, matches webring card text default */
  font-weight: 400; /* Changed to regular */
  color: #fff; /* Text color white */
  background-color: #373737; /* Initial background color */
  text-decoration: none;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem; /* Added padding */
  border-radius: 4px; /* Optional: for slightly rounded corners */
  transition:
    background-color 0.3s ease,
    color 0.3s ease; /* Smooth transition for background and text color */
}

.maeveport-dual-pane-text-read-more-link:hover {
  background-color: #000; /* Background black on hover */
  color: #fff; /* Text color white on hover */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .maeveport-dual-pane-text-container {
    flex-direction: column;
    gap: 1rem; /* Reduced gap when stacked */
    align-items: flex-start; /* Align stacked items to the start (left) */
  }

  .maeveport-dual-pane-text-left-pane,
  .maeveport-dual-pane-text-right-pane {
    flex-basis: 100%; /* Full width when stacked */
    text-align: left; /* Ensure text within panes is left-aligned */
    margin-top: 0; /* Reset margin for right pane in stacked view initially */
    max-width: 600px; /* Limit width in stacked view for readability */
  }

  .maeveport-dual-pane-text-right-pane {
    margin-top: 1rem; /* Reduced space above the right pane when stacked */
  }
}

/* Match .maeveport-scroll-text-line responsive font sizes */
@media (min-width: 768px) and (max-width: 991px) {
  .maeveport-dual-pane-text-line {
    font-size: var(--font-size-heading-xxxl);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .maeveport-dual-pane-text-line {
    font-size: var(--font-size-heading-xl);
  }
}

@media (max-width: 575px) {
  .maeveport-dual-pane-text-line {
    font-size: var(--font-size-heading-lg);
  }
  /* Retain other non-font-size responsive styles from previous step for this breakpoint if any */
}

/* Keep existing layout responsive adjustments below if they were separate */
@media (max-width: 768px) {
  .maeveport-dual-pane-text-container {
    padding: 2rem 1rem;
  }
  /* Font sizes for p and a are now handled by global var --font-size-body-md and its responsiveness
       OR by more specific overrides below if needed. */
}

/* Match .maeveport-webring-card-text responsive font sizes for p and link */
@media (max-width: 767.98px) {
  .maeveport-dual-pane-text-right-pane p,
  .maeveport-dual-pane-text-read-more-link {
    font-size: var(--font-size-body-xs);
  }
}

/* @media (max-width: 576px) was here, content now merged or handled above for .maeveport-dual-pane-text-line */