:root {
  --logo-gap: max(60vw, 45vh);
}

/* Mobile */
body {
  /* Necessary background width scaling when overflowing on x-axis */
  position: relative;
  width: fit-content;
}

.main {
  position: relative;
  min-height: 100svh;
  min-width: 100svw;
  padding: var(--padding-mobile);
  display: grid;
  grid: 20vh 1fr / repeat(3, 1fr);
  row-gap: var(--logo-gap);
}

/* Service labels (top row) */
.service-section {
  display: contents;
}

.service {
  font: var(--font-16-bold);
  text-transform: uppercase;
  line-height: 1.2;
  align-self: center;
}

.service--1,
.nav--portfolio {
  text-align: left;
}

.service--2,
.nav--logo {
  text-align: center;
}

.service--3,
.nav--info {
  text-align: right;
}

/* Navigation labels */
.nav-section {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
}

.nav {
  font: var(--font-32-bold);
  font-variation-settings: "wdth" 115;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 auto; /* Centers nav using margins */
}

.nav--logo {
  margin-top: auto; /* Push logo down using margins */
}

.logo {
  height: 22px;
}

/* Tablets */
@media screen and (min-width: 576px) {
  body {
    min-height: 100svh; /* Necessary as .main no longer fills entire viewport height */
  }

  .main {
    padding-top: calc(50svh + var(--logo-gap) / 2);
    min-height: unset;
    grid: auto auto / repeat(3, 1fr);
    row-gap: 0;
  }

  .nav-section {
    display: contents;
  }

  .nav {
    margin: unset; /* Reset mobile styles */
  }

  .nav.nav--logo {
    grid-area: 2 / 2; /* Push logo before of info link */
  }
}

/* Desktop */
@media screen and (min-width: 992px) {
  body {
    /* Push main to the bottom */
    display: flex;
    align-items: end;
  }

  .main {
    padding: 0 10% 50px 10%;
    z-index: 1; /* Put in front of background */
  }

  .service {
    font: var(--font-19-bold);
  }

  .nav {
    font: var(--font-42-bold);
    font-variation-settings: "wdth" 115;
  }

  .logo {
    height: 27px;
  }
}