/* Build Section - Equal height for text and image divs on mobile */

/* Mobile - Make text div same height as image div */
@media screen and (max-width: 767px) {
  .build-text {
    height: 315px !important; /* Reduced by 10% from 350px */
    min-height: 315px !important;
    max-height: 315px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important; /* Allow scroll if content overflows */
  }

  .build-image {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }
}

/* Small mobile */
@media screen and (max-width: 640px) {
  .build-text {
    height: 293px !important; /* Reduced by 10% from 325px */
    min-height: 293px !important;
    max-height: 293px !important;
  }

  .build-image {
    height: 325px !important;
    min-height: 325px !important;
    max-height: 325px !important;
  }
}

/* Very small mobile */
@media screen and (max-width: 480px) {
  .build-text {
    height: 270px !important; /* Reduced by 10% from 300px */
    min-height: 270px !important;
    max-height: 270px !important;
  }

  .build-image {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

/* Extra small mobile */
@media screen and (max-width: 375px) {
  .build-text {
    height: 248px !important; /* Reduced by 10% from 275px */
    min-height: 248px !important;
    max-height: 248px !important;
  }

  .build-image {
    height: 275px !important;
    min-height: 275px !important;
    max-height: 275px !important;
  }
}

/* Ensure content is properly centered in fixed height container */
@media screen and (max-width: 767px) {
  .build-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* If content is too tall, allow scrolling */
  .build-text:has(> :nth-child(4)) {
    justify-content: flex-start !important;
    padding-top: 2rem !important;
    overflow-y: auto !important;
  }
}