@media (max-width: 767.98px) {
  :root {
    --default-font-size: 16px;
    /* font size */
    --font-size-small: 0.8rem;
    --font-size-regular: 1.0rem;
    --font-size-medium: 2.0rem;
    --font-size-big: 2.3rem;
    /* weight */
    --font-weight-light: 100;
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 800;
  }

  .show-mobile {
    display: block;
  }

  .show-desktop {
    display: none;
  }

  #hero-section .image-box {
    max-height: 480px;
  }

  #hero-section .text-box .headline {
    height: 12rem;
  }
}