.hero {
  width: 100%;
  height: 85%;
  display: grid;
}

.intro-9x16 {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 9/16;
  opacity: 1;
}

.outro-9x16 {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 9/16;
  opacity: 0;
}

.intro-16x9 {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 16/9;
  width: 100%;
  display: none;
  opacity: 0;
}

.outro-16x9 {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 16/9;
  width: 100%;
  display: none;
  opacity: 0;
}

.tagline {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  margin-top: 45%;
  opacity: 0;
  width: 74%;
  z-index: 30; /*fixes animation bug?*/
}

.hero-social-links {
  display: none;
}

@media screen and (min-width: 640px) {
  .hero {
    width: 100%;
    height: auto;
    max-height: 95%;
    display: grid;
    background-color: var(--black);
  }

  .intro-16x9 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: block;
    opacity: 0;
  }

  .outro-16x9 {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    opacity: 0;
  }

  .intro-9x16 {
    display: none;
  }

  .outro-9x16 {
    display: none;
  }

  .tagline {
    grid-column: 1;
    grid-row: 1;
    place-self: center;
    margin-top: 25%;
    opacity: 0;
    width: 44%;
    max-width: 503px;
    z-index: 30; /*fixes animation bug?*/
  }
}

@media screen and (min-width: 1360px) {
  .hero-social-links {
    padding: 0;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    list-style: none;
    place-self: start end;
    margin-right: 8.2rem;
    margin-top: 7.2rem;
    pointer-events: all;
    z-index: 200;
    /* gap: 1.1rem; */
  }

  .hero-social-links li {
    width: 16px;
    padding-bottom: 1.1rem;
  }

  .hero-social-links li svg {
    fill: var(--white);
  }

  .hero-social-links li svg:hover {
    fill: var(--inevitable-red);
  }
}