.grid
  .box.box--hero Hero Box
  .box.box--sticky Sticky Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box
  .box.box--alpha Full-bleed Box

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --gap: 20px;
  --gutter: 1px;
  --cols: var(--gutter) 1fr var(--gutter);

  @media screen and (min-width: 768px) {
    --max-width: 600px;
    --aside-width: 200px;
    --gutter: calc((100% - (var(--max-width))) / 2 - var(--gap));
    --cols: var(--gutter) 1fr var(--aside-width) var(--gutter);
  }

  @media screen and (min-width: 980px) {
    --max-width: 900px;
    --aside-width: 300px;
  }
}

.grid {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: var(--cols);
}

.box {
  background-color: #C850C0;
  padding-top: 10vmin;
  padding-bottom: 10vmin;
  text-align: center;
 
  @media screen and (max-width: 767px) {
    grid-column: 2 / -2;
  }
}

.box--hero {
  @media screen and (min-width: 768px) {  
    grid-column-start: 2;
  }
}

.box--alpha {
  @media screen and (min-width: 768px) {  
    grid-column: 1 / -1;
    padding-left: calc(var(--gutter) + var(--gap));
    padding-right: calc(var(--gutter) + var(--gap) + var(--gap) + var(--aside-width));
  }
}

.box--sticky {
  background-color: #FFCC70;
  
  @media screen and (min-width: 768px) {
    position: sticky;
    top: 0;
  }
}