body {
  font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#app {
  display: flex;
  flex-flow: row wrap;
}

.wrapper {
  flex: 1 0 33.333%;
  position: relative;
  height: 0;
  padding-bottom: 33.333vw;
}

.wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: scale(.8);
}

/* preloader source: https://codepen.io/Alex-Miller/pen/qviHa */
.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  transition: all 100ms ease-in;
}

.preloader .circle,
.preloader .circle .circle-inner {
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background: linear-gradient(rgba(64, 150, 238, 1) -50%,rgba(64, 150, 238, 0) 60%);
}

.preloader .circle {
  animation: roll 6s linear infinite;
}

.preloader .circle .circle-inner {
  padding: 5px;
  animation: roll 2s linear infinite reverse;
}

.preloader .circle .circle-inner::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}