@layer components {
  :root {
    --page-header-top-height: 46px;
    --page-header-bottom-height: 58px;
    --page-header-height: calc(
        var(--page-header-top-height) + var(--page-header-bottom-height)
    );
    @screen lg {
      --page-header-bottom-height: 0px;
      --page-header-top-height: 70px;
    }
  }

  html.is-site-bettingen {
    --page-header-bottom-height: 0px;
  }

  .page-header {
    height: var(--page-header-height);
    grid-template: 'L . M' 'N N N';
    grid-template-rows: 46px 1fr;

    @screen lg {
      grid-template: 'L N M';
      grid-template-rows: auto;
    }

    @apply lg:grid-cols-3;
  }

  .page-header-mobile-enter-active,
  .page-header-mobile-leave-active {
    @apply transition duration-300 ease-swing overflow-hidden;
    @apply motion-reduce:!transition-none;

    > div,
    > a {
      @apply transition duration-300 ease-swing;
    }
  }

  .page-header-mobile-enter-from,
  .page-header-mobile-leave-to {
    @apply opacity-0;
    > div,
    > a {
      @apply translate-x-50;
    }
  }
}