/* تنسيقات قسم المعرض */
.section.testi {
  padding-block: var(--section-padding);
}

.photo-gallery {
  display: grid;
  /* هذا يجعل الشبكة مستجيبة: تعرض أعمدة بحجم 250px على الأقل، وتتمدد لملء المساحة المتاحة */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* المسافة بين الصور */
  margin-top: 50px;
}

.gallery-img {
  width: 100%;
  /* هذا السطر مهم جداً: يجعل الصور تملأ المساحة المخصصة لها دون تشويه */
  object-fit: cover;
  border-radius: 8px; /* حواف دائرية أنيقة */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* ظل خفيف للصور */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  /* يمكنك تحديد نسبة العرض إلى الارتفاع هنا لجعل جميع الصور مربعة أو مستطيلة */
  /* على سبيل المثال: aspect-ratio: 1 / 1; */
}

.gallery-img:hover {
  transform: scale(1.03); /* تكبير الصورة قليلاً عند التحويم */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* ظل أوضح عند التحويم */
}

/* تنسيقات إضافية لجعل الصفحة تبدو أكثر اكتمالاً */
.section-subtitle {
  color: var(--gold-crayola);
  font-family: var(--font-forum);
}

.section-title {
  color: var(--white);
  font-family: var(--font-forum);
}