/* Temel Grid Konfigürasyonu */
.gallery-grid-content {
    display: grid;
    gap: 1rem;
    /* Görseller arasındaki boşluk */
    width: 100%;
}

/* Doğrudan enjekte edilen <img> etiketleri için stiller */
.gallery-grid-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    /* Görselleri varsayılan olarak kare yapar (İsteğe bağlı: kaldırabilirsin) */
    border-radius: 8px;
    /* Opsiyonel köşe yuvarlatma */
    display: block;
}

/* Sütun Varyasyonları (Masaüstü ve Tablet) */
@media (min-width: 768px) {
    .gallery-grid-content.x2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid-content.x3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid-content.x4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery-grid-content.x6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Mobil Uyumluluk (767px ve altı) */
@media (max-width: 767px) {

    /* x2 ve x3 sınıfları mobilde 2 sütun düşer */
    .gallery-grid-content.x2,
    .gallery-grid-content.x3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* x4 ve x6 sınıfları çok sıkışmaması için mobilde 2 veya 3 sütuna daralır */
    .gallery-grid-content.x4,
    .gallery-grid-content.x6 {
        grid-template-columns: repeat(2, 1fr);
        /* İsteğe göre repeat(3, 1fr) de yapılabilir */
    }
}

/* Çok küçük ekranlar için (480px ve altı) */
@media (max-width: 480px) {
    .gallery-grid-content {
        gap: 0.5rem;
        /* Dar ekranlarda boşluğu azaltır */
    }

    /* İsteğe bağlı: Çok küçük ekranlarda tüm düzenleri tek sütuna düşürmek istersen: */
    /*
  .gallery-grid-content[class*="x"] {
    grid-template-columns: 1fr;
  }
  */
}