/* Add custom CSS styles below */ 
/* استيراد خط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

/* تطبيق الخط على الموقع */
body, p, span, a, li, h1, h2, h3, h4, h5, h6, div {
  font-family: "Cairo", sans-serif !important;
}



/* =========================================
   تصغير بانرات نقاء الجودة
   4 بالصف كمبيوتر - 2 بالصف جوال
   بدون تعديل أو قص الصور
========================================= */

/* الكمبيوتر */
@media screen and (min-width: 768px) {

    section.s-block--banners .grid.two-row {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    /* إلغاء توزيع القالب الخاص two-row */
    section.s-block--banners .grid.two-row > * {
        grid-column: auto !important;
        grid-row: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
    }
}


/* =========================================
   الجوال — 4 بانرات مثل شكل الكمبيوتر
========================================= */
@media screen and (max-width: 767px) {

    section.s-block--banners .grid.two-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    section.s-block--banners .grid.two-row > * {
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        /* المهم: نلغي الارتفاع الطويل */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        /* نفس تناسب شكل الكمبيوتر تقريباً */
        aspect-ratio: 1 / 1.05 !important;

        position: relative !important;
        overflow: hidden !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* الحاويات الداخلية تأخذ حجم البطاقة */
    section.s-block--banners .grid.two-row > * > a,
    section.s-block--banners .grid.two-row > * > div {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    /* صورة الخلفية */
    section.s-block--banners .grid.two-row .lazy__bg {
        width: 100% !important;
        height: 100% !important;

        background-size: cover !important;
        background-position: center !important;
    }
}