/* 1. The Gallery Container (The magic happens here) */
.video-gallery {
    /* Enables flex layout */
    display: flex;
    /* Allows items to wrap onto the next line */
    flex-wrap: wrap;
    /* Adds space between the video blocks (horizontal and vertical) */
    gap: 20px;
    /* Centers the entire gallery block */
    justify-content: center;
    padding: 20px;
}

/* 2. Styling the Individual Video Block */
.video-container {
    /* Sets a base width. This is crucial for how many fit on a row. */
    /* calc() subtracts the gap/margin, helping keep sizing consistent. */
    /* This setting aims for about 3 videos per row on a desktop screen. */
    flex-basis: calc(33.33% - 20px); 
    
    /* Sets the minimum and maximum width to ensure responsiveness */
    min-width: 300px; /* Prevents video from getting too small */
    max-width: 400px;
    
    /* Ensures the video container grows/shrinks appropriately */
    flex-grow: 1; 
    flex-shrink: 1;

    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* 3. Ensuring Video and Text look good inside the container */
.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

.video-text-overlay {
    padding: 15px;
    /* Other text styles (font-size, color) go here */
}