.scroll-cue {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
}

.scroll-cue i {
  margin-left: 0;
}

.scroll-mouse {
  display: block;
  grid-column: 1 / -1;
  width: 18px;
  height: 28px;
  margin-top: 6px;
  margin-left: 2px;
  border: 1px solid currentColor;
  border-radius: 10px;
}

.scroll-mouse span {
  display: block;
  width: 2px;
  height: 5px;
  margin: 5px auto 0;
  background: var(--gold);
  border-radius: 2px;
  animation: mouse-scroll 1.6s ease-in-out infinite;
}

@keyframes mouse-scroll {
  0%, 100% { opacity: 0; transform: translateY(0); }
  25%, 70% { opacity: 1; }
  80% { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 800px) {
  .scroll-cue {
    display: block;
  }

  .scroll-cue i,
  .scroll-mouse {
    writing-mode: horizontal-tb;
  }

  .scroll-mouse {
    margin: 10px 0 0;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .hero-copy {
    padding-bottom: 140px;
  }

  .scroll-cue {
    left: 5vw;
    bottom: 36px;
  }
}

@media (min-width: 1101px) {
  .hero-copy {
    padding-bottom: 90px;
  }
}