.hero-button {
  position: absolute;
  width: 4rem;
  height: 4rem;
  padding: 1rem;
}

.hero-button-icon-slot {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-button-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hero-button--github {
  top: 6rem;
  left: 2rem;
}

.hero-button--credit {
  top: 12rem;
  left: 2rem;
}

.hero-credit-icon {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.hero-credit-label {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.hero-button--credit:hover .hero-credit-icon,
.hero-button--credit:focus-visible .hero-credit-icon {
  transform: translateY(-150%);
}

.hero-button--credit:hover .hero-credit-label,
.hero-button--credit:focus-visible .hero-credit-label {
  transform: translateY(0);
}

@media (min-width: 1000px) {
  .hero-button--credit {
    display: none;
  }
}