Exercice 5 - Responsive Design

5.1 Mobile First

Base mobile + media queries tablette et desktop avec min-width.

/* Base mobile */
.container {
  width: 100%;
  padding: 15px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.content {
  display: block;
}

.sidebar {
  display: none;
}

/* Tablette */
@media (min-width: 768px) {
  .nav-menu { flex-direction: row; }
  .content {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 10px;
  }
  .sidebar { display: block; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 980px;
    margin: 0 auto;
  }
  .content {
    grid-template-columns: 2fr 1fr;
    gap: 16px;
  }
}