footer {
  display: flex;
  position: fixed;
  padding-bottom: var(--lg);
  bottom: 0px;
  z-index: 997;
  width: 100%;
  justify-content: space-between;
  padding: 0;
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms ease, opacity 220ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}


@media (min-width: 300px) and (max-width: 576px) {
footer {
  display: flex;
  position: fixed;
  padding: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 990;
  width: 100%;
  justify-content: center;
}
}

@media (min-width: 577px) and (max-width: 768px) {
footer {
  display: flex;
  position: fixed;
  padding: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 990;
  width: 100%;
  justify-content: center;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
footer {
  display: flex;
  position: fixed;
  padding: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 990;
  width: 100%;
  justify-content: center;
}
}

footer.hide-on-scroll {
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0) + var(--xs)));
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {

}

@media (min-width: 1600px) {

}