# راهنمای طراحی بنرهای Banners3

## 📐 چیدمان
دو بنر در سمت چپ (عمودی) + یک بنر بزرگ در سمت راست

---

## 🖥️ دسکتاپ

### سایزها (با container padding 80px):
- **بنر 1 (Order 1)** - بالا سمت چپ
  - عرض: **متغیر** (نیمی از فضای باقیمانده)
  - ارتفاع: **500px**
  - نسبت عرض به ارتفاع: **2:1** (width:height)
  - سایز پیشنهادی: **1000×500px**

- **بنر 2 (Order 2)** - پایین سمت چپ
  - عرض: **متغیر** (نیمی از فضای باقیمانده)
  - ارتفاع: **500px**
  - نسبت عرض به ارتفاع: **2:1** (width:height)
  - سایز پیشنهادی: **1000×500px**

- **بنر 3 (Order 3)** - سمت راست (بزرگ)
  - عرض: **متغیر** (نیمی از فضای باقیمانده)
  - ارتفاع: **1000px** (دو برابر ارتفاع بنرهای سمت چپ)
  - نسبت عرض به ارتفاع: **1:1** (width:height)
  - سایز پیشنهادی: **1000×1000px**

### فاصله‌ها:
- فاصله بین بخش چپ و راست: **16px**
- فاصله بین دو بنر سمت چپ: **8px**

---

## 📱 موبایل

همه بنرها به صورت عمودی و عرض کامل:

- **بنر 1**: عرض کامل، ارتفاع **500px**
- **بنر 2**: عرض کامل، ارتفاع **500px**
- **بنر 3**: عرض کامل، ارتفاع **1000px**

---

## 💡 توصیه

برای طراحی می‌توانید با این سایزها کار کنید:
- **بنر 1 و 2**: `1000×500px` (نسبت 2:1)
- **بنر 3**: `1000×1000px` (نسبت 1:1)

سیستم به صورت خودکار عرض‌ها را متناسب با صفحه تنظیم می‌کند و با `object-cover` نسبت تصاویر حفظ می‌شود.

---

**نکات مهم**:
- طراحی باید RTL (راست به چپ) باشد
- تصاویر با `object-cover` نمایش داده می‌شوند (ممکن است قسمت‌هایی از تصویر کراپ شود)
- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد