.top-banner {
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding-inline-start: 150px;
  color: #fff;
  background-color: #000;
  z-index: 999;
}

.top-banner[hidden] {
  display: none;
}

.top-banner::before {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  inset-block-start: calc(50% - 15px);
  inline-size: 120px;
  block-size: 30px;
  background-image: url("../../images/top-banner/bat-eyes.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.top-banner::after {
  content: "";
  position: absolute;
  inset-inline-start: 45px;
  inset-block-end: -12px;
  inline-size: 60px;
  block-size: 13px;
  background-image: url("../../images/top-banner/bat-teeth.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.top-banner__content {
  margin: 0;
}

@media (width <= 1366px) {
  .top-banner {
    padding-inline-start: 110px;
  }

  .top-banner::before {
    inset-block-start: calc(50% - 10px);
    inline-size: 80px;
    block-size: 20px;
  }

  .top-banner::after {
    inset-inline-start: 33px;
    inset-block-end: -8px;
    inline-size: 45px;
    block-size: 9px;
  }
}

@media (width <= 768px) {
  .top-banner  {
    margin-block-end: 0;
    padding-inline-start: 15px;
    font-size: 14px;
  }

  .top-banner::before, .top-banner::after {
    display: none;
  }

  .top-banner__button {
    padding-block: 0.3em;
  }
}
