/* 3-column layout 20/60/20 */
body.hack {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-areas: "left main right";
  margin: 0 auto;
  padding: 0 0 2rem 0;
  max-width: 1500px;
}

/* Areas */
.left { 
  grid-area: left; 
}
.main {
  grid-area: main;
  width: 100%;
}
.right { 
  grid-area: right; 
}

.right section {
  max-width: 25rem;
}

.main .content {
  /* Ensure main column occupies at least 80% of viewport height */
  min-height: 60vh;
}

.main .spacing div {
  width: 0;
  height: 100%;
  border-left: 1px solid #ccc;
  margin: 0 auto;
}

@media (max-width: 768px) {
  body.hack {
    grid-template-columns: 100%;
    grid-template-areas: "main";
    /* overflow-x: hidden; */
  }
  .left,
  .right { display: none; }
  .main .content .slide {
    border-bottom: 1.6px dashed #777;
    margin-bottom: 20px;
  }
}

/* Responsive: stack */
@media (max-width: 1230px) and (min-width: 768px) {
  body.hack {
    grid-template-columns: 100%;
    grid-template-areas: "main";
  }
  .left,
  .right { display: none; }
}

@media (max-width: 1300px) and (min-width: 1230px) {
  body.hack {
    grid-template-columns: 70% 30%;
    grid-template-areas: "main right";
  }
  .left
  { display: none; }
}