/* --- 1. الإعدادات الافتراضية (للشاشات الكبيرة Desktop) --- */
.grid-banners {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 أعمدة */
    grid-template-rows: repeat(2, 170px);   /* صفين بارتفاع ثابت */
    gap: 16px !important;
    grid-gap: 16px !important;
    grid-template-areas:
        "item1 item2 item3"
        "item4 item5 item6";
}

.grid-banners a {
    background-size: contain !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 170px !important; /* الارتفاع الافتراضي */
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

/* ربط العناصر بالـ Grid Areas */
.grid-banners a:nth-child(1) { grid-area: item1; -ms-grid-row: 1; -ms-grid-column: 1; }
.grid-banners a:nth-child(2) { grid-area: item2; -ms-grid-row: 1; -ms-grid-column: 2; }
.grid-banners a:nth-child(3) { grid-area: item3; -ms-grid-row: 1; -ms-grid-column: 3; }
.grid-banners a:nth-child(4) { grid-area: item4; -ms-grid-row: 2; -ms-grid-column: 1; }
.grid-banners a:nth-child(5) { grid-area: item5; -ms-grid-row: 2; -ms-grid-column: 2; }
.grid-banners a:nth-child(6) { grid-area: item6; -ms-grid-row: 2; -ms-grid-column: 3; }


/* --- 2. إعدادات التابلت والشاشات المتوسطة (768px وأقل) --- */
@media (max-width: 768px) {
    .grid-banners {
        grid-template-columns: repeat(2, 1fr) !important; /* تحويل لعمودين */
        grid-template-areas:
            "item1 item1"
            "item2 item3"
            "item4 item4"
            "item5 item6" !important;
        gap: 12px !important;
        grid-gap: 12px !important;
    }

    .grid-banners a {
        height: 150px !important; /* تقليل الارتفاع قليلاً للتابلت */
    }
}


/* --- 3. إعدادات الجوال الصغير (450px وأقل) --- */
@media (max-width: 450px) {
    .grid-banners {
        gap: 8px !important;
        grid-gap: 8px !important;
    }

    /* ضبط الارتفاع المحدد لكل عنصر بناءً على طلبك */
    .grid-banners a:nth-child(1),
    .grid-banners a:nth-child(2),
    .grid-banners a:nth-child(4),
    .grid-banners a:nth-child(5) {
        height: 130px !important;
    }

    .grid-banners a:nth-child(3),
    .grid-banners a:nth-child(6) {
        height: 130px !important; /* لضمان تناسق الشكل في الجوال */
    }
    
}

    .s-block--categories-custom.merge-with-top-component {
        margin-top: 3rem !important;
    }

.s-block--hero-slider .swiper-slide .overlay-bg:after {
    background: transparent !important;
}

@media (max-width: 992px) {
    .dts-page .s-slider-thumbs .s-slider-thumbs-container,
    .dts-page salla-slider.details-slider .s-slider-container img {
        height: auto !important;
    }
}