body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 40px 10px; direction: ltr; } .clients-grid { display: grid; /* حالت پیش‌فرض دسکتاپ: ۴ ستون */ grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 1200px; margin: 0 auto; } .client-card { background: #ffffff; border-radius: 8px; padding: 15px 10px; text-align: center; border: 1px solid #dcdcdc; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: background-color 0.3s ease; } .client-card:hover { background-color: #f1f5f9; border-color: #cbd5e1; } .client-logo { width: 80px; height: 80px; object-fit: contain; margin-bottom: 12px; background-color: transparent; } .client-name { font-size: 13px; color: #333333; font-weight: 600; line-height: 1.4; } /* لپ‌تاپ‌های کوچکتر و تبلت‌ها: ۳ ستون */ @media (max-width: 992px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } } /* موبایل‌ها: همیشه ۲ ستون (هرگز ۱ ستون نمی‌شود) */ @media (max-width: 600px) { .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; /* فاصله کمتر در موبایل */ } .client-logo { width: 60px; /* لوگوی کوچکتر در موبایل */ height: 60px; } .client-name { font-size: 11px; /* فونت کوچکتر در موبایل برای جلوگیری از به هم ریختگی */ } }