.mediaPage .mediaContent {
  gap: 2em 4em;
  display: grid;
  padding: 30px;
}

/*
    * == KEYFRAMES ==
*/

@keyframes imageLoaded {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes onActiveImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes onHideImage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
    * == MEDIA QUERIES ==
*/

@media only screen and (min-width: 1080px) {
  .mediaPage .mediaContent {
    grid-template-columns: auto 1fr;
    padding: 60px 90px;
  }
}
