/* Basic styling for the parent container */
.parent_video_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns for large screens */
    gap: 20px; /* Space between child elements */
    padding: 20px; /* Optional padding around the gallery */
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* Optional: Limit max width */
    margin: 0 auto; /* Center the gallery */
}

/* Styling for child elements */
.child_video_gallery {
    background-color: #f0f0f0; /* Optional: Background for visibility */
    border: 1px solid #ddd; /* Optional: Border for definition */
    border-radius: 8px; /* Optional: Rounded corners */
    padding: 10px; /* Optional: Inner padding */
    box-sizing: border-box;
    aspect-ratio: 16 / 9; /* Optional: Maintain aspect ratio for video containers */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content inside child */
    overflow: hidden; /* جلوگیری از سرریز محتوا (اختیاری، اما مفید) */
}

/* استایل برای تصاویر داخل child - جلوگیری از سرریز عرض */
.child_video_gallery img {
    max-width: 100%; /* حداکثر عرض برابر با عرض div */
    height: auto; /* حفظ نسبت ابعاد بدون تغییر ارتفاع دستی */
    width: auto; /* عرض خودکار، اما محدود به max-width */
    display: block; /* حذف فضای اضافی زیر تصویر */
    border-radius: 4px; /* اختیاری: گوشه‌های گرد برای تصویر */
}

/* Medium screens: 2 columns (e.g., tablets) */
@media (max-width: 1023px) {
    .parent_video_gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
}

/* Small screens: 1 column (e.g., mobiles) */
@media (max-width: 767px) {
    .parent_video_gallery {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .child_video_gallery {
        padding: 8px; /* Adjust padding for smaller screens */
    }

    /* تنظیم اضافی برای تصاویر در صفحه‌های کوچک */
    .child_video_gallery img {
        max-width: 95%; /* کمی حاشیه بیشتر در موبایل */
    }
}