:root {
  --grid: 16px;
  --spacer-8: 8px;
  --spacer-12: 12px;
  --spacer-16: 12px;
  --spacer-24: 16px;
  --spacer-32: 24px;
  --spacer-48: 32px;
  --spacer-64: 32px;
  --spacer-96: 48px;
  --spacer-128: 64px;
  --spacer-192: 96px;
}

.center-content {
  margin: 0 var(--grid) 0 var(--grid);
  width: var(--content);
}

.font-mobile-nav {
  font-size: 0.75rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}

.font-xs {
  font-size: 0.6rem;
  letter-spacing: var(--letterspacing-01);
  line-height: var(--lineheight-04);
}
.font-sm {
  font-size: 0.725rem;
  letter-spacing: var(--letterspacing-01);
  line-height: var(--lineheight-04);
}
.font-ss {
  font-size: 0.8rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}
.font-base {
  font-size: 0.9375rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}
.font-xl {
  font-size: 1rem;
  letter-spacing: var(--letterspacing-03);
  line-height: var(--lineheight-03);
}
.font-2xl {
  font-size: 1.1rem;
  letter-spacing: var(--letterspacing-03);
  line-height: var(--lineheight-03);
}
.font-3xl {
  font-size: 1.4rem;
  line-height: var(--lineheight-02);
}
.font-4xl {
  font-size: 1.7rem;
  line-height: var(--lineheight-02);
}
.font-5xl {
  font-size: 2rem;
  line-height: var(--lineheight-01);
}
.font-6xl {
  font-size: 2.2rem;
  line-height: var(--lineheight-01);
}
.font-7xl {
  font-size: 2.8rem;
  line-height: var(--lineheight-01);
}
.font-8xl {
  font-size: 3.2rem;
  line-height: var(--lineheight-00);
}
.font-9xl {
  font-size: 3.6rem;
  line-height: var(--lineheight-00);
}

.nav-wrapper {
  height: 80px;
}

.nav-mobile {
  padding: var(--spacer-12) var(--grid);
}

.mobile-nav-icon img {
  width: 40px;
  height: auto;
}

.img-strip-top {
  height: 600px;
  margin: 0 var(--grid) 0 var(--grid);
}

.img-strip-top img {
  height: 200px;
}

.header-illustration img {
  width: 280px;
}

.img-strip-middle {
  height: 600px;
}

.img-strip-middle img {
  height: 200px;
}

.kachel-wrapper {
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
}

.kachel {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.kachel img {
  width: 64px;
  height: auto;
  margin: 0 var(--spacer-16) 0 0;
}

.images-wrapper img {
  height: 200px;
}

.left {
  grid-template-columns: 1fr;
}

.right {
  grid-template-columns: 1fr;
}

.projects-wrapper img {
  height: 120px;
}

.contact {
  height: 460px;
}

.contact-illustration img {
  width: 240px;
}

.about-img img {
  height: 420px;
}
.footer-wrapper {
  height: 420px;
}

.footer-illustration img {
  width: 280px;
}