.banner-grid-container {
            display: grid;
            /* در حالت پیش‌فرض (دسکتاپ): 4 ستون با عرض مساوی */
            grid-template-columns: repeat(4, 1fr);
            /* فاصله بین بنرها (افقی و عمودی) */
            gap: 20px;
            max-width: 1200px; /* حداکثر عرض کل مجموعه */
            margin: 0 auto; /* وسط‌چین کردن کل مجموعه */
        }

        /* استایل آیتم‌های تکی (لینک‌ها) */
        .banner-item {
            display: block; /* مهم: لینک‌ها باید رفتار بلوکی داشته باشند */
            position: relative;
            overflow: hidden; /* برای جلوگیری از بیرون زدن تصویر هنگام زوم */
            border-radius: 12px; /* گرد کردن گوشه‌ها */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* سایه ملایم */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* استایل تصاویر داخل بنر */
        .banner-item img {
            width: 100%; /* تصویر تمام عرض والد خود را می‌گیرد */
            height: auto; /* ارتفاع متناسب با عرض تغییر می‌کند */
            display: block; /* حذف فاصله اضافی زیر تصاویر */
            transition: transform 0.5s ease; /* نرم کردن افکت زوم */
        }

        /* --- افکت‌های هاور (اختیاری برای زیبایی) --- */
        .banner-item:hover {
            box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* سایه بیشتر هنگام هاور */
        }
        
        .banner-item:hover img {
             /* زوم شدن تصویر هنگام هاور */
            transform: scale(1.05);
        }


        /* --- مدیا کوئری برای ریسپانسیو (موبایل و تبلت) --- */
        /* وقتی عرض صفحه کمتر از 768 پیکسل شد (موبایل و تبلت عمودی) */
        @media (max-width: 768px) {
            .banner-grid-container {
                 /* تغییر به 2 ستون با عرض مساوی */
                 /* چون 4 آیتم داریم، خودکار در 2 سطر قرار می‌گیرند */
                grid-template-columns: repeat(2, 1fr);
                /* کاهش فاصله در موبایل */
                gap: 10px; 
            }
        }

        /* اختیاری: برای گوشی‌های خیلی کوچک (زیر 480 پیکسل) اگر بخواهید تک ستونه شود */
        /*
        @media (max-width: 480px) {
            .banner-grid-container {
                grid-template-columns: 1fr;
            }
        }
        
 
 
}