@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@300;700&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
img { display: block; }

/* Base */
html { font-size: 62.5%; }
body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 300;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { margin-bottom: 2rem; font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem; }
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; }
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
}

/* Grid */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
@media (min-width: 400px) { .container { width: 85%; padding: 0; } }
@media (min-width: 550px) { .container { width: 80%; } }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
}
.twelve.columns { width: 100%; }
.six.columns    { width: 100%; }
@media (min-width: 550px) {
  .six.columns  { width: 48%; }
}

/* Utilities */
.u-max-full-width { max-width: 100%; }