.spacefiller
  width: 100vw
  height: $navbar-height + $secondary-navbar-height + 5vh

.collage
  display: flex
  flex-flow: wrap
  background-color: $env-primary
  justify-content: flex-start
  align-items: flex-start
  position: relative
  border: solid 10px $pure-white

  & > *
    border: solid 10px $pure-white

.image__header
  text-align: center
  color: $pure-white
  padding: 0 2rem

.collage__image__wrap
  display: flex
  justify-content: center
  align-items: center
  width: 19%
  height: 49%
  position: absolute
  opacity: 0
  animation: .4s ease-in-out aniCollage forwards
  perspective: 1000px

  &:hover
    .collage__image
      transform: rotateY(90deg)

.collage__image
  display: block
  position: absolute
  object-fit: cover
  object-position: center
  width: 100%
  height: 100%
  transition: .4s ease-in-out
  transform-style: preserve-3d

.collage__placeholder
  background-color: $env-primary
  width: 19%
  height: 49%
  position: absolute

.collage__image__wrap-1
  left: 0

.collage__image__wrap-1
  height: 65%
  top: 0
  width: 30%
  left: 0

.collage__image__wrap-2
  height: 50%
  width: 40%
  left: 30%

.collage__image__wrap-3
  height: 50%
  width: 30%
  left: 70%
  top: 0

.collage__image__wrap-4
  height: 35%
  width: 40%
  left: 0
  top: 65%

.collage__image__wrap-5
  width: 60%
  height: 50%
  left: 40%
  top: 50%

@keyframes aniCollage
  0%
    opacity: 0
  100%
    opacity: 1