* { box-sizing: border-box; }

body { margin: 0; font-family: Arial, sans-serif; background:#f1f1f1; color:#222; }

#container { max-width: 1100px; margin: 0 auto; }

nav { background:#222; text-align:center; }
nav a { display:inline-block; color:#fff; text-decoration:none; padding:14px 16px; }
nav a:hover { background:#ddd; color:#000; }

.content { padding: 12px; }

main, aside {
  background:#fff; padding:15px; margin-top:12px; border-radius:8px;
}

.responsive-media { width:100%; height:auto; display:block; margin:10px 0; }

.video-wrapper { position:relative; padding-top:56.25%; height:0; overflow:hidden; margin:10px 0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

footer { margin-top:12px; padding:15px; text-align:center; background:#222; color:#fff; }
footer a { color:#fff; }

/* Mobile default: 1 column */
.layout { display:block; }

/* Tablet/Desktop: 2 columns */
@media screen and (min-width: 800px) {
  .layout { display:flex; gap:12px; align-items:flex-start; }
  main { width:70%; }
  aside { width:30%; }
}