.magazine-grid {
  display: grid;
  grid: 
    "hero hero hero" 200px
    "article1 article2 sidebar" minmax(150px, auto)
    "article3 article3 sidebar" minmax(150px, auto)
    / 1fr 1fr 200px;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.magazine-grid > div {
  padding: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  text-align: center;
}

.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); grid-area: hero; }
.article1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); grid-area: article1; }
.article2 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); grid-area: article2; }
.article3 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); grid-area: article3; }
.sidebar { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); grid-area: sidebar; }