.header {
  --background-color: var(--background-color-mobile);
  --padding: var(--padding-mobile);
  --title-padding: var(--title-padding-mobile);
  --gap: 20px;
  --logo-width: var(--logo-width-mobile);
  --cta-font-size: var(--cta-font-size-mobile);
  --cta-padding: var(--cta-padding-mobile);
  background: rgb(var(--background-color));
  color: rgb(var(--color-light));
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  padding: var(--padding);
  position: relative;
}

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

.header__cta.header__cta {
  -ms-flex-item-align: center;
      align-self: center;
  border-color: rgb(var(--cta-background-color));
  background: rgb(var(--cta-background-color));
  border-radius: var(--cta-border-radius);
  color: rgb(var(--cta-color));
  display: -ms-flexbox;
  display: flex;
  font-size: calc(var(--cta-font-size) / var(--base) * 1rem);
  justify-self: flex-end;
  -ms-flex-order: 1;
      order: 1;
  padding: var(--cta-padding);
  margin-left: auto;
  white-space: wrap;
  width: var(--cta-max-width);
}
.header__cta.header__cta--full {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -ms-flex-align: center;
      align-items: center;
}

.header__drawer {
  -ms-flex-order: 2;
      order: 2;
}

.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;
}
.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: 576px) {
  .header {
    --background-color: var(--background-color-tablet);
    --padding: var(--padding-tablet);
    --title-padding: var(--title-padding-tablet);
  }
}
@media (min-width: 992px) {
  .header {
    --background-color: var(--background-color-full);
    --padding: var(--padding-full);
    --title-padding: var(--title-padding-full);
  }
}
@media (min-width: 992px) {
  .header__drawer {
    display: none;
  }
  .header__menu {
    display: block;
  }
}
@media (min-width: 992px) {
  .header {
    --logo-width: var(--logo-width-desktop);
  }
}
@media (min-width: 1350px) {
  .header {
    --cta-font-size: var(--cta-font-size-desktop);
    --cta-padding: var(--cta-padding-desktop);
  }
}
.header__menu {
  width: 100%;
  padding: 0 3vw;
}
.header__menu ul {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}