:root {
  --header-outer-height: 3.2rem;
  --header-inner-height: 2rem;
  --header-height-difference: calc(var(--header-outer-height) - var(--header-inner-height));
}

body {
  position: relative;
}

.navigation {
  background: #d3d3d3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: sticky;
  font-size: 0.9rem;
  /* top: -0.8rem; */
  /* height: 3rem; */

  height: 3.2rem;

  height: var(--header-outer-height);
  /* top: calc(var(--header-height-difference) * -1); */
  top: calc(0rem - calc(3.2rem - 2rem));
  top: calc(0rem - var(--header-height-difference));
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  z-index: 1;
}

/* box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%); */

.navigation__content {
    padding: 0;

    height: 2rem;

    height: var(--header-inner-height);
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }