.responsive-layout {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.responsive-layout > div {
  padding: 25px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  min-height: 100px;
}

/* Mobile First */
@media (max-width: 768px) {
  .responsive-layout {
    grid: 
      "header" auto
      "main" 1fr
      "sidebar" auto
      "footer" auto
      / 1fr;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .responsive-layout {
    grid: 
      "header header" auto
      "main sidebar" 1fr
      "footer footer" auto
      / 2fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .responsive-layout {
    grid: 
      "header header header" auto
      "nav main sidebar" 1fr
      "footer footer footer" auto
      / 200px 2fr 1fr;
  }
}

.resp-header { background: #e74c3c; grid-area: header; }
.resp-nav { background: #3498db; grid-area: nav; }
.resp-main { background: #2ecc71; grid-area: main; }
.resp-sidebar { background: #f39c12; grid-area: sidebar; }
.resp-footer { background: #9b59b6; grid-area: footer; }