@media screen and (max-width: 768px) {
  
  /* 1. STRUCTURAL TRACK: Prevent columns from stretching items into vertical 1:2 rectangles */
  .owl-carousel .owl-stage {
    display: flex !important;
    align-items: flex-start !important;
  }

  /* 2. THE UNIFIED SIZING RULE: Force both JPEGs and SVGs to scale perfectly within their columns */
  .owl-carousel .owl-item img,
  .owl-carousel:not(.owl-loaded) img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    
    /* CRITICAL FOR RECOVERY: Caps the mobile width to match your desktop 445px limits */
    max-width: 445px !important; 
    
    /* CRITICAL FOR PAGESPEED: Reserves a perfect square layout box to stop the layout shift */
    aspect-ratio: 1 / 1 !important; 
  }

  /* 3. Handle Raster JPEGs layout */
  .owl-carousel .owl-item img:not([src*=".svg"]),
  .owl-carousel:not(.owl-loaded) img:not([src*=".svg"]) {
    object-fit: cover !important; /* Crops cleanly inside the responsive square box without stretching */
  }

  /* 4. Handle Vector SVGs layout */
  .owl-carousel .owl-item img[src*=".svg"],
  .owl-carousel:not(.owl-loaded) img[src*=".svg"] {
    object-fit: contain !important; /* Preserves vector shapes and details safely */
  }
}