.lazy-load-image-background.blur {
  filter: blur(15px);
}

.lazy-load-image-background.blur.lazy-load-image-loaded {
  filter: blur(0);
  transition: filter .3s;
}

.lazy-load-image-background.blur > img {
  opacity: 0;
}

.lazy-load-image-background.blur.lazy-load-image-loaded > img {
  opacity: 1;
  transition: opacity .3s;
}

/*
 * vehicle-landing.css
 * ═══════════════════════════════════════════════════════════════════════════════
 * تمام override های CSS مختص صفحه /vehicle اینجا هستند.
 *
 * ── وضعیت فعلی (موقت) ─────────────────────────────────────────────────────
 * Tailwind v4 اجازه نمی‌دهد breakpoint های xl: را فقط برای یک صفحه override
 * کنیم — مقادیر breakpoint در build time به صورت global تولید می‌شوند.
 * به همین دلیل در کامپوننت‌های این صفحه به جای xl: از min-[1232px]: استفاده
 * شده است.
 *
 * ── وقتی خواستیم ریفکتور کنیم ─────────────────────────────────────────────
 * اگر در آینده xl را در globals.css به 1232px تغییر دادیم (یا پکیج @bimeh/ui
 * احتمالا مقادیر نوشته شده در این css هم برای dsContainer اعمال خواهند شد
 * در نتیجه در آن زمان می‌توان این فایل را حذف کرد
 * و در نهایت باید همه در همه کامپوننت‌های صفحه وسیله نقلیه (vehicle) 
 * مقدار min-[1232px]: را به xl: تغییر دهیم

/* dsContainer override — فقط داخل .vehicle-page اعمال می‌شود */
.vehicle-page .dsContainer {
  @media (min-width: 576.9px) {
    /* BP4 */
    max-width: initial;
    padding: 0 16px;
  }

  @media (min-width: 768px) {
    /* BP3 */
    max-width: 736px;
    padding: 0;
  }

  @media (min-width: 992px) {
    /* BP2 */
    max-width: initial;
    padding: 0 24px;
  }

  @media (min-width: 1232px) {
    /* BP1 */
    max-width: 1184px;
    padding: 0;
  }
}