/* 
 * CLS Fix - Prevents Cumulative Layout Shift 
 * By setting appropriate height values for the hero image container
 */

/* Mobile first approach - set default height for smaller screens */
@media screen and (max-width: 639px) {
  .relative.w-full.mt-6.lg\:mt-0.sm\:w-1\/2.lg\:relative.md\:h-auto {
    min-height: 320px; /* Based on the image container's height */
  }
}

/* For small to medium screens */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .relative.w-full.mt-6.lg\:mt-0.sm\:w-1\/2.lg\:relative.md\:h-auto {
    min-height: 350px; /* Adjusted for tablet view */
  }
}

/* 
 * No specific rule for desktop (lg screens and above)
 * as you mentioned it's working well on desktop
 */