.header {
  @extend %absolute;
  @include set-absolute-and-location($top: 0, $right: 0, $left: 0);

  max-width: 428px;
  margin: auto;
}

.header-container {
  @extend %d-flex;
  @include flex-layout($align: center);

  justify-content: space-between;
  position: relative;
  max-width: 428px;
  min-width: $min-width;
  padding: 24px;
  margin: auto;
}

.header-content {
  @extend %d-flex;
  @include flex-layout($justify: space-between);
}

@media screen and (min-width: 840px) {
  .header {
    max-width: $max-width;
  }

  .header-container {
    @include flex-layout($gap: 10px);

    padding-top: 32px;
    padding-left: 70px;
    padding-right: 61px;
    max-width: 1309px;
  }

  .header-content {
    @include flex-layout($gap: 10px);
    @include size(100%, auto);

    max-width: 918px;
  }
}