/* شبكة الأقسام متجاوبة */
section .grid {
  display: grid !important;
  gap: 12px !important;
  align-items: start !important;
}

/* الجوال: صورتين */
@media (max-width: 640px) {
  section .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* التابلت: 3 صور */
@media (min-width: 641px) and (max-width: 1024px) {
  section .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* الكمبيوتر: 4 صور إذا المساحة تسمح */
@media (min-width: 1025px) {
  section .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* الكرت مربع ويمتد حسب حجم الشاشة */
section .grid > * {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* الصورة داخل الكرت */
section .grid > * img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 16px !important;
}
/* تقليل المسافات بالجوال */
@media (max-width: 640px) {
  section .grid {
    gap: 8px !important;
  }
}


/* تحسين شكل البطاقات */
section .grid > * {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* تأثير مرور الماوس للكمبيوتر */
@media (hover: hover) {
  section .grid > *:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}