*{ box-sizing:border-box; }
body{
  margin:0;
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#bfbfbf;
}


.page{
  width:85%;
  margin:3rem auto;
  background:#fff;
  padding:2%;
  outline:12px solid #eaeaea;
}


.topbar, .gallery, .content{
  width:75%;
  margin:0 auto;           
}


.topbar{
  min-height:80px;
  background:#69a6da;
  color:#20364d;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}


.content::after{ content:""; display:block; clear:both; }


.left{
  float:left;
  width:75%;                
  min-height:260px;
  background:#c3e691;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#2f4027;
}
.aside{
  float:left;
  width:25%;
  min-height:260px;
  background:#8eaa63;
  display:flex; align-items:center; justify-content:center;
  color:#223018; font-weight:800;
}


.gallery{
  min-height:220px;
  background:#f4b5ee;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#3a1d34;
}


@media (max-width:700px){
  .page{ width:94%; padding:3%; }
  .topbar, .gallery, .content{ width:100%; }
  .left, .aside{
    width:100%;
    float:none;
    min-height:120px;
  }
}