diff --git a/includes/styles.css b/includes/styles.css index 6ba4400..cf3919d 100644 --- a/includes/styles.css +++ b/includes/styles.css @@ -240,3 +240,25 @@ td, th { background-color: #0f0f0f; color: #e69109; } + +/* Videos page styles */ +.videos-container { + display: flex; + flex-wrap: wrap; + gap: 16px; + justify-content: center; + padding: 1rem; +} +.video-item { + flex: 1 1 300px; + max-width: 100%; +} +.video-item video { + max-width: 100%; + max-height: 80vh; + width: auto; + height: auto; + object-fit: contain; + display: block; + margin: 0 auto; +} diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css index 70bdf9e..e6aaff5 100644 --- a/includes/styles_mobile.css +++ b/includes/styles_mobile.css @@ -81,4 +81,23 @@ table { section h2 { margin-top: 10px; +} +/* Videos page responsive adjustments */ +.videos-container { + display: flex; + flex-wrap: wrap; + gap: 16px; + justify-content: center; + padding: 1rem; +} +.video-item { + flex: 1 1 100%; + max-width: 100%; +} +.video-item video { + width: 100%; + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; } \ No newline at end of file