.flashing {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.flashing-image {
  width: 25%;
  position: absolute;
}

.flashing-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- settings -- */

.color { filter: none; }

.greyscale { filter: grayscale(1); }

.sepia { filter: sepia(1); }

/* -- conditions -- */

.hidden { visibility: hidden; }

.shown { visibility: visible; }

/* -- animation -- */

.flashing-animation {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: auto 100%;
  background-position: 0;
}