@font-face {
      font-family: 'Futter';
      src: url("/assets/fonts/UPFutterGrotesk-VariableVF.woff2") format("woff2 supports variations"),
            url("/assets/fonts/UPFutterGrotesk-VariableVF.woff2") format("woff2-variations");
      font-weight: 100 1000;
}

* {
      font-family: "Futter", sans-serif;
      font-feature-settings: 'ss08' on;
}

.med {
      font-weight: 400;
}

.bla {
      font-weight: 900;
}

.s {
      font-size: 1rem;
}

.m {
      font-size: 1.25rem;
}

.l {
      font-size: 1.5rem;
}

.xl {
      font-size: 1.8rem;
}

.page-title {
      font-size: 13dvw;
      line-height: .9;
      text-align: center;
      color: var(--c-grey);
      font-variation-settings: "wght" 900;
      letter-spacing: -.25dvw;
      transition: all .5s ease-in-out;
}

.page-title.animated {
      font-variation-settings: "wght" 100;
      color: var(--c-white);
      opacity: 0;
}

.page-title.move {
      font-variation-settings: "wght" 900;
      color: var(--c-grey);
      opacity: 1;
}

.center {
      text-align: center;
}

.grey {
      color: var(--c-grey);
}

.dark-grey {
      color: var(--c-dark-grey);
}

@media (min-width: 720px) {
      .page-title {
            font-size: clamp(3rem, 13dvw, 12rem);
            letter-spacing: -0.4dvw;
      }

      .s {
            font-size: .8rem;
      }

      .m {
            font-size: 1rem;
      }
}