/* Fundamentals */
body {
  --canvas-width: calc(min(100%, 960px));
  --canvas-width-padded: calc(var(--canvas-width) - 40px);
}

/* Basic info-page three-column layout */
.columns {
  width: var(--canvas-width-padded);
  margin: 40px auto 0;
}

@media (min-width: 600px) {
  .columns {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    grid-gap: 20px;
  }
  .auto {
    grid-column: 2 / 4;
    column-count: 2;
    column-gap: 20px;
  }
}

.columns h2 { margin: 0; text-transform: uppercase; font-size: 1.4rem; color: #7e8076; line-height: 1.6em; }
.columns p { margin: 0 0 0.5rem; }
.columns div { position: relative; }
.columns img { width: 100%; }

/* Four colored links */
.grid-links { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2px; margin-bottom: 2rem; height: 122px; }
.grid-links a { height: 60px; line-height: 60px; text-align: center; text-decoration: none; color: #fff; font-size: 0.9rem; }
.grid-links a:first-child { border-bottom-right-radius: 24px; background: #bba17b; }
.grid-links :nth-child(2) { border-bottom-left-radius: 24px; background: #ac895d; }
.grid-links :nth-child(3) { border-top-right-radius: 24px; background: #e6b86b; }
.grid-links a:last-child { border-top-left-radius: 24px; background: #cda05c; }