.social-rail {
  position: fixed !important;
  left: clamp(1.25rem, 3vw, 3.25rem) !important;
  top: auto !important;
  bottom: clamp(1.5rem, 4vh, 3rem) !important;
  z-index: 40 !important;
  transform: none !important;
}

.hero-side {
  position: fixed !important;
  right: clamp(1.5rem, 4vw, 4rem) !important;
  bottom: clamp(1.25rem, 4vh, 3rem) !important;
  z-index: 30 !important;
  width: min(34rem, calc(100vw - 2rem)) !important;
  margin-left: 0 !important;
  justify-self: auto !important;
}

.music-player-scale {
  transform-origin: 100% 100% !important;
}

@media (min-width: 1024px) {
  .music-player-scale {
    transform: scale(0.75) !important;
  }
}

@media (max-width: 767px) {
  .hero-side {
    right: clamp(0.8rem, 3vw, 1.25rem) !important;
    bottom: clamp(5.75rem, 12vh, 7rem) !important;
    width: min(23rem, calc(100vw - 1.6rem)) !important;
  }

  .social-rail {
    left: clamp(0.8rem, 3vw, 1.25rem) !important;
    bottom: clamp(5.75rem, 12vh, 7rem) !important;
  }
}

main.about-page-shell.route-view,
.about-page-shell {
  min-height: 100vh !important;
  background-color: #aaa !important;
  background-image: url("/assets/about-background.png") !important;
  background-position: right center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}