:root{
  --bg: #f0f0f0;         
  --header: #f59e0b;      
  --nav: #1e78b4;         
  --aside: #e6f6ec;      
  --footer: #22c55e;     
  --text: #0b0b0c;
}

html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.container{
  box-sizing:border-box;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  gap: 12px;
  max-width:1200px;       
  margin-inline:auto;     
  padding:0 16px 16px;
}

/* Blocks */
header{
  grid-area:header;
  background:var(--header);
  color:#fff;
  display:grid;           
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:6px;
}
header .logo{
  background:#fff2;
  border:1px solid #ffffff55;
  border-radius:6px;
  padding:6px 10px;
  font-weight:700;
}
header h1{margin:0;font-size:28px}

nav{
  grid-area:nav;
  background:var(--nav);
  border-radius:6px;
  padding:10px 12px;
  display:grid;
  justify-content:center; 
  gap:10px;
  grid-auto-flow:column;
}
nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:4px;
}
nav a:hover{background:#ffffff22}

main{
  grid-area:main;
  background:#fff;
  border-radius:6px;
  padding:16px;
}
main h2{margin:18px 0 10px}

aside{
  grid-area:aside;
  background:var(--aside);
  border-radius:6px;
  padding:16px;
}
aside h3{margin-top:0}
aside div{
  display:grid;
  grid-auto-flow:column;         
  gap:14px;
  justify-content:start;
  align-items:center;
  font-size:38px;
  margin-top:10px;
  flex-wrap:wrap;
}

footer{
  grid-area:footer;
  background:var(--footer);
  color:#fff;
  text-align:center;
  border-radius:6px;
  padding:10px;
  font-weight:600;
}

@media (min-width:1024px){
  .container{
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   aside"
      "footer footer";
    gap:14px;
    padding:0 24px 24px;
  }

  nav{
    justify-content:start;
    grid-auto-flow:column;
    gap:16px;
    padding:12px 16px;
  }

  aside div{
    grid-auto-flow:row;
    justify-content:start;
    font-size:44px;
  }
}