.center {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.center--narrow {
  max-width: 700px;
}

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
}

.column--left {
  /* fallback */
  width: 200px;
  max-width: 200px;

  width: var(--nav-width);
  max-width: var(--nav-width);

  align-self: flex-start;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.column--right {
  /* fallback */
  max-width: 240px;
  width: 28%;
  padding-left: 60px;

  max-width: var(--right-column-max-width);
  width: var(--right-column-width);
  padding-left: var(--right-column-padding);
  padding-top: 2.9rem;
}

.column--third {
  width: 33%;
}

@media (max-width: 1060px) {
  .center {
    padding: 0 1.2rem;
  }
  .center--narrow {
    max-width: 850px;
    padding: 0 2.4rem;
  }
}

@media (max-width: 900px) {
  .center--narrow {
    max-width: 100%;
  }
  .column--center,
  .column--left {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    flex: auto;
  }
  .column--left {
    padding-left: 1.2rem;
  }
}

@media (max-width: 800px) {
  .center--narrow {
    padding: 0 1.2rem;
  }
  .center .center,
  .column--left {
    padding: 0;
  }

  .column {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    flex: auto;
  }
  .column--left {
    position: static;
  }
  .column--right {
    padding-left: 0;
    padding-top: 0;
  }
}
