/* Responsive two-column layout */
.video-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 1rem; /* Add space between columns */
}

/* Left column for the video */
.video-container .video-column {
    flex: 1 1 100%; /* Full width by default for smaller screens */
    max-width: 650px; /* Optional, limit the size of the video */
}

/* Right column for chapter markers */
.video-container .chapters-column {
    flex: 1 1 100%; /* Full width by default on smaller screens */
    max-width: 400px; /* Optional, limit the size of the chapter markers */    
}

.video-container .chapters-column ul li {
    margin-top: 0.5rem;
}

h2.video-title {
    margin-bottom: 1rem;
    font-size: 16pt;
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .video-container {
        flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    }

    .video-container .video-column,
    .video-container .chapters-column {
        flex: 1; /* Make columns equal width */
    }
}