.image {
  max-height: 55vmin;
  position: absolute;
  transform: translate(-50%, -50%);
  
  img {
    max-height: 55vmin;
    width: auto;
  }
}

.inactive {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.active {
  opacity: 1;
  transition: opacity 0ms ease-in-out;
}

.top {
  transition: all 0.5s ease-in-out 1.5s;
  max-height: calc(100vh - var(--footer-height));
  display: flex;
  align-items: center;
  width: auto;
  
  img {
    transition: all 0.5s ease-in-out 2s;
    max-height: calc(100vh - var(--footer-height));
    width: auto;
    max-width: 100vw;
  }
}

.trailingImage1 {
  transition: opacity 0.5s ease-in-out 1s;
  opacity: 0;
}
.trailingImage2 {
  transition: opacity 0.5s ease-in-out 0.75s;
  opacity: 0;
}
.trailingImage3 {
  transition: opacity 0.5s ease-in-out 0.5s;
  opacity: 0;
}
.trailingImage4 {
  transition: opacity 0.5s ease-in-out 0.25s;
  opacity: 0;
}