Панель промоакций вверху перед сайтом

      <div class="panel-promotions">
    <div class="panel-promotions__inner">
        <div class="panel-promotions__container container">Здесь будет акция</div>
        <div class="panel-promotions__close">
            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.95593 1.33862C4.697 1.33862 2.06274 3.97288 2.06274 7.23181C2.06274 10.4907 4.697 13.125 7.95593 13.125C11.2149 13.125 13.8491 10.4907 13.8491 7.23181C13.8491 3.97288 11.2149 1.33862 7.95593 1.33862ZM7.95593 11.9464C5.35704 11.9464 3.24138 9.8307 3.24138 7.23181C3.24138 4.63291 5.35704 2.51726 7.95593 2.51726C10.5548 2.51726 12.6705 4.63291 12.6705 7.23181C12.6705 9.8307 10.5548 11.9464 7.95593 11.9464ZM7.95593 6.40087L10.0716 4.28522L10.9025 5.11616L8.78687 7.23181L10.9025 9.34746L10.0716 10.1784L7.95593 8.06275L5.84028 10.1784L5.00934 9.34746L7.12499 7.23181L5.00934 5.11616L5.84028 4.28522L7.95593 6.40087Z" fill="#FEF7FF"></path>
            </svg>
        </div>
    </div>
</div>

    

      .panel-promotions {
  height: 40px;
}
.panel-promotions__inner {
  background-color: #2e4f52;
}
.panel-promotions__container {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.panel-promotions__close {
  display: none;
}


@media only screen and (max-width: 1023px) {
    .panel-promotions {
      position: relative;
      z-index: 101;
      height: 48px;
    }
    .panel-promotions__inner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    .panel-promotions__container {
      height: 48px;
      padding-right: 40px;
    }
    .panel-promotions__close {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 48px;
      cursor: pointer;
    }
    .panel-promotions ~ .header .header__main {
      top: 48px;
    }

    .panel-promotions ~ .header_mobile .header__menu-wrapper {
      top: calc(48px + 76px);
    }
}
    

      const PanelPromotions = function() {
    const PANEL = document.querySelector('.panel-promotions');
    const CLOSE = document.querySelector('.panel-promotions__close');
    this.init = function() {
        CLOSE.addEventListener('click', e => this.handlerOnClickClose(e));
    }
    this.handlerOnClickClose = function() {
        this.handlerOnRemoveClose();
    }
    this.handlerOnRemoveClose = function() {
        PANEL.remove();
    }
    PANEL ? this.init() : null;
}