html-css-practice-two/src/styles/layouts/_header.scss

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

  width: 428px;
  margin: auto;
}

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

  justify-content: space-between;
  position: relative;
  padding: 24px;
  margin: auto;
}

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

@media screen and (min-width: 600px) {
  .header {
    width: auto;
  }
}

@media screen and (min-width: 1020px) {
  .header {
    @include size(auto, auto);
  }

  .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;
    padding-bottom: 26px;
  }
}