@media (max-width: 64rem) {

  /* Components */

  html .logo .badge {
    top: -100%;
  }
}

@media (max-width: 48rem) {

  /* Variables */

  :root {
    --font-size-base: 1rem;
    --font-size-tiny: 0.5em;
    --font-size-small: 0.8em;
    --font-size-large: 1em;
    --font-size-h6: 1em;
    --font-size-h5: 1.1em;
    --font-size-h4: 1.21em;
    --font-size-h3: 1.331em;
    --font-size-h2: 1.4641em;
    --font-size-h1: 1.61051em;

    --header-height-factor: 1;
  }


  /* Hero */

  html .hero .content {
    left: 0;
    transform: translate(0, -50%);
  }

  /* Components */

  html .badge {
    font-size: 100%;
    white-space: normal;
  }

  html .badge>* {
    white-space: normal;
  }

  html .logo .badge {
    top: -80%;
    white-space: nowrap;
  }


}

@media (max-width: 40rem) {

  /* Variables */

  :root {
    --hero-height: 8rem;
  }

  /* Components */

  /*   html .badge {
    margin-left: 0;
    margin-right: 0;
  } */

  html .logo .badge {
    top: -110%;
    left: 60%
  }

  /* Hero */

  /*   html .hero.scrolled .portrait {
    transform: scale(6) translateY(22%);
  } */

  html .hero.scrolled .logo .badge,
  html .hero.scrolled .content .badge img {
    display: none;
  }
}

@media (max-width: 34rem) {

  /* Hero */

  html .hero .portrait {
    top: auto;
  }

  /* Components */

  html .logo .badge {
    top: -130%;

  }

}