.smooth-scroll__button {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: var(--z-index-smooth-scroll-button);
  width: 4.5rem;
  height: 4.5rem;
  cursor: pointer;
  background-color: var(--color-blue-light);
  border-radius: 50%;
  transition: opacity 0.5s ease;
}

.smooth-scroll__button--top {
  opacity: 0;
}

.smooth-scroll__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  text-align: center;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .smooth-scroll__button {
    right: 1rem;
    bottom: 1rem;
    width: 4.6rem;
    height: 4.6rem;
  }
}

@media screen and (min-width: 1440px) {
  .smooth-scroll__button {
    right: 1.31rem;
    bottom: 1.31rem;
    width: 4.87rem;
    height: 4.87rem;
  }
}