.video-section {
    padding: 30px;
   margin-bottom: 100px;
    margin-top: 50px;
    
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.video {
    flex: 1 1 calc(33.33% - 40px); /* Allows 3 videos per row on wider screens */
    min-width: 300px;
    max-width: 400px;
    
    overflow: hidden;
   
}

.video {
    width: 400px;
    height: 225px;
    border: 2px solid black;
    aspect-ratio: 16/9;
}

@media (max-width: 768px) {
    .video {
        flex: 1 1 calc(50% - 40px); /* 2 videos per row on tablets */
    }
}

@media (max-width: 500px) {
    .video {
        flex: 1 1 100%; /* 1 video per row on small screens */
    }
}