#no-tel-banner {
  align-items: center;
  background-color: var(--alt-front-color);
  color: var(--main-back-color);
  display: flex;
  font-weight: bold;
  justify-content: center;
  min-height: var(--larger-size);
  padding: var(--smaller-size);
  text-align: center;
}

#tel-banner {
  background-color: var(--alt-back-color);
  /*background: -webkit-linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from-offset),
    var(--alt-grad-to)
  );
  background: -moz-linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from-offset),
    var(--alt-grad-to)
  );
  background: linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from-offset),
    var(--alt-grad-to)
  );*/
  color: var(--main-back-color);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  min-height: var(--larger-size);
  width: 100vw;
  width: 100lvw;
}

#tel-banner :is(a, button),
#tel-banner :is(a, button) * {
  font-weight: bold;
  text-decoration: none;
}

#tel-banner :is(a, button):hover {
  opacity: var(--hover-opacity);
}

@media (max-width: 480px) {

  #tel-banner {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--mini-size) var(--large-size);
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
  }

  #tel-banner span {
    display: none;
  }

  #tel-banner .alt-text {
    display: initial;
  }

}

@media (min-width: 481px) {

  #tel-banner {
    gap: var(--mini-size) var(--larger-size);
    padding: var(--smaller-size) var(--large-size);
  }

  #tel-banner i {
    font-size: var(--large-font);
  }
  
}