.grid
  .box 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;
}

body {
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --gap: 20px;
  --cols: 1fr;
  --max-width: calc(100% - 2 * var(--gap));

  @media screen and (min-width: 768px) {
    --max-width: 600px;
    --aside-width: 200px;
    --cols: 1fr var(--aside-width);
  }

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

.grid {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: var(--cols);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.box {
  background-color: #C850C0;
  padding-top: 10vmin;
  padding-bottom: 10vmin;
  text-align: center;
}

.box--alpha {
  grid-column-start: 1;
  position: relative;
  z-index: 0;
  
  &:before {
    content: "";
    background-color: #C850C0;
    display: block;
    position: absolute;
    top: 0;
    right: calc(((100vw - (100% + var(--gap) + var(--aside-width))) / -2) - (var(--aside-width) + var(--gap)));
    bottom: 0;
    left: calc((100vw - (100% + var(--gap) + var(--aside-width))) / -2);
    z-index: -1;
  }
}

.box--sticky {
  background-color: #FFCC70;

  @media screen and (min-width: 768px) {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}