.video-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px; /* Reduced padding for small screens */
}

.video-featured {
    margin-bottom: 20px; /* Adjusted spacing for better scaling */
    text-align: center;
}

.video-featured iframe {
    width: 100%; /* Ensures full width on all devices */
    height: calc(56.25vw); /* Maintains 16:9 aspect ratio for any screen width */
    max-height: 450px; /* Limits height on larger screens */
    border: none;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

.video-featured h2 {
    font-size: 20px; /* Slightly smaller font for smaller screens */
    color: var(--primary-color);
    margin: 15px 0;
}

.video-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Reduced gap for small screens */
}

.video-item {
    flex: 0 0 calc(33.33% - 10px); /* Default: 3 videos per row */
    max-width: calc(33.33% - 10px);
    margin-bottom: 15px; /* Adjusted spacing */
    text-align: center;
}

.video-item iframe {
    width: 100%;
    height: 180px; /* Consistent height for small videos */
    border: none;
    border-radius: 8px;
}

.video-item h3 {
    font-size: 16px; /* Slightly smaller text for small screens */
    color: var(--text-color);
    margin-top: 5px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .video-item {
        flex: 0 0 calc(50% - 10px); /* 2 videos per row */
        max-width: calc(50% - 10px);
    }

    .video-featured iframe {
        height: calc(56.25vw); /* Dynamically adjust height for 16:9 ratio */
        max-height: 300px; /* Limit height on medium screens */
    }
}

@media (max-width: 480px) {
    .video-item {
        flex: 0 0 100%; /* 1 video per row */
        max-width: 100%;
    }

    .video-featured iframe {
        height: calc(56.25vw); /* Full width, 16:9 ratio */
        max-height: 200px; /* Ensure it fits on small screens */
    }
}