.o-header {
  @include z(z-header);
  position: relative;

  @include mq($max: m) {
    position: fixed;
    left: 0;
    top: 0;
    background-color: palette(primary);
    width: 100%;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.25);
  }

  @include mq(m) {
    width: calc(100% - 80px);
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: transparent;
  }

  @include mq(1060) {
    @include contain;
  }

}

.o-header__main {
  position: relative;
  @include flex(space-between center);

  @include mq($max: m) {
    height: 80px;
    padding-left: 30px;
    @include flex(space-between center);
  }

  @include mq(m) {
    @include flex(flex-start flex-end);
  }

  @include mq(1300) {
    padding-right: column(1, 12);
  }
}

.o-header__logo {
  flex: 0 0 80px;
  width: 80px;
  display: inline-block;

  @include mq($max: m) {
    margin-top: -8px;
  }

  @include mq(m) {
    flex: 0 0 120px;
    width: 120px;
    margin: 0;
  }
}

.o-header__logo-icon--white-bg {
  @include mq($max: m) {
    display: none;
  }
}

.o-header__logo-icon--dark-bg {
  @include mq(m) {
    display: none;
  }
}

.o-header__nav {
  flex-grow: 1;
  display: none;

  @include mq(m) {
    display: block;
  }
}

.o-header__button {
  @include mq(m) {
    display: none;
  }
}

.o-header__placeholder {
  height: 80px;

  @include mq(m) {
    display: none;
  }
}