.toTopBtn {
  position: fixed;
  inset-inline-end: var(--container-padding);
  bottom: var(--container-padding);
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  color: var(--white);
  visibility: hidden;
  background-color: var(--red-400);
  border-radius: 50%;
  opacity: 0;
  transition: all 250ms ease-in-out;
}
.toTopBtn:hover, .toTopBtn:focus-visible {
  background-color: var(--red-300);
  transform: scale(1.1);
}
.toTopBtn.show {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 740px) {
  .toTopBtn {
    --size: 60px;
  }
}
@media (min-width: 1200px) {
  .toTopBtn {
    --icon-size: 44px;
  }
}
@media (max-width: 1199.98px) {
  .toTopBtn {
    --icon-size: 30px;
  }
}
@media (min-width: 739.98px) and (max-width: 1199.98px) {
  .toTopBtn {
    --size: 48px;
  }
}
@media (max-width: 739.98px) {
  .toTopBtn {
    --size: 40px;
  }
}
.toTopBtn_icon {
  width: var(--icon-size);
  height: var(--icon-size);
}