*,:before,:after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%;}
article  { 
  position:relative;
  display:block;
  width:100%;  
  height:400px; // Dynamic set to viewport height
  overflow:hidden;
}
section {
  position:absolute;
  display:block;
  width:100%;
  top:400px;    // Dynamic set to viewport height
  height:400px; // Dynamic set to viewport height
  text-align:center; 
}
#a { background:gold; }
#b { background:magenta; }
#c { background:olive; }
#d { background:dodgerblue; }

h2 { font:300 4em/2 'Lato', sans-serif; color:#fff; }
a  { font:300 1em/2 'Lato', sans-serif; color:#fff; display:inline-block; padding:1em;
  text-decoration:none;
  border-radius:4px;
  margin:.5em;
  #a & { background:darken(gold,5%); &:hover {  background:darken(gold,2%); } }
  #b & { background:darken(magenta,5%); &:hover {  background:darken(magenta,2%); }}
  #c & { background:darken(olive,5%); &:hover {  background:darken(olive,2%); }}
  #d & { background:darken(dodgerblue,5%); &:hover {  background:darken(dodgerblue,2%); }}  
}