/**
 * IMAGE-GRID
*/
.c-image-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.c-image-grid__item .crop {
  padding-bottom: 56.24%;
  position: relative;
  margin: 6px;
}

.c-image-grid__image {
  position: absolute;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.c-image-grid__slider,
.c-image-grid__slider .flickity-viewport, .c-image-grid__thumbnails,
.c-image-grid__thumbnails .flickity-viewport {
  width: 100%;
}

.c-image-grid__thumbnails .c-image-grid__item {
  width: 33%;
}

.c-image-grid--slider {
  flex-direction: column;
}

.c-image-grid .videoPoster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  border: none;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  transition: opacity 800ms, height 0s;
  transition-delay: 0s, 0s;
}

.c-image-grid .videoPoster span {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.33);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.c-image-grid .videoPoster span:before, .c-image-grid .videoPoster span:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transition: border-color 300ms;
}

.c-image-grid .videoPoster span:before {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 5px solid white;
  border-radius: 100%;
}

.c-image-grid .videoPoster span:after {
  width: 0;
  height: 0;
  margin: -24px 0 0 -14px;
  border-left: 40px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

.c-image-grid .videoPoster:hover span:before, .c-image-grid .videoPoster:focus span:before {
  border-color: black;
}

.c-image-grid .videoPoster:hover span:after, .c-image-grid .videoPoster:focus span:after {
  border-left-color: black;
}

.c-image-grid .videoPoster:hover {
  cursor: pointer;
}

.c-image-grid__iframe {
  padding-bottom: 56.24%;
  width: 100%;
  position: relative;
  height: 0;
  overflow: hidden;
}

.c-image-grid__iframe iframe {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: scale(1.2);
  transform-origin: 50% 50%;
}

.c-image-grid__iframe.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  transition-delay: 0s, 800ms;
}