.sticky-header {
  z-index: 999;
  max-width: 100%;
}

.header {
  background: rgb(var(--background-color));
  color: rgb(var(--color-light));
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  padding: var(--padding);
  position: relative;
}
@media (max-width: 991.96px) {
  .header--mobile-cta-hidden .header__cta {
    display: none;
  }
  .header--mobile-cta-hidden .header__drawer {
    margin-left: auto;
  }
}

.header__title {
  padding: var(--title-padding);
}
.header__title a {
  display: block;
}
.header__title img {
  width: var(--logo-width);
  width: clamp(var(--logo-width-mobile), 22vw, var(--logo-width-desktop));
}

.header__drawer {
  -ms-flex-order: 2;
      order: 2;
  -ms-flex-item-align: center;
      align-self: center;
}

.header__menu {
  display: none;
}
.header__menu[data-position=top] {
  -ms-flex-item-align: start;
      align-self: start;
}
.header__menu[data-position=middle] {
  -ms-flex-item-align: center;
      align-self: center;
  width: auto;
}
.header__menu[data-position=bottom] {
  -ms-flex-item-align: end;
      align-self: end;
}
.header__menu[data-position=full] {
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

@media (min-width: 992px) {
  .header__drawer {
    display: none;
  }
  .header__menu {
    display: block;
  }
}
@media (min-width: 992px) {
  .header {
    --logo-width: var(--logo-width-desktop);
  }
}
.header__cta {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
  background-color: rgb(var(--background-color));
  border-radius: var(--border-radius);
  color: rgb(var(--font-color));
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  margin-left: auto;
  padding: var(--padding);
  text-align: center;
  max-width: var(--cta-max-width);
}
.header__cta--default-height-full {
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media (pointer: fine) {
  .header__cta:hover {
    background-color: rgb(var(--background-color-hover));
    color: rgb(var(--font-color-hover));
  }
}

.header__menu {
  width: 100%;
  padding: 0 3vw;
  margin: 0 auto;
}