#hero {
  display: grid;
  grid-template: 1fr / 1fr;
  width: 100%;
  height: 100vh;

  .hero-tile {
    animation: carousel ease-out 10s infinite;

    &:first-of-type {
      //animation: carousel ease-out 3s infinite;
    }
  }
}


@keyframes carousel {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 1
  }

  /*
  100% {
    background: 1;
  }
  */
}