Snapshot: Video

.c-snapshot {
  background-color: #fff;
  border-radius: remify(16px);
  overflow: hidden;
  display: inline-block;
  padding: 0;
  @include shadow(medium);
  position: relative;

  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  /* Night/10 */
  border: 2px solid #E7EBEF;

  margin-top: remify(0px);
  margin-bottom: remify(32px);
  padding-bottom: remify(0px);

  p {
    padding: 0 remify(16px) remify(12px);
    
    .c-canvas__paper & {
      margin-bottom: 0;
    }

  }

  .c-canvas__sidebar &,
  .o-adjacent__item & {
    width: 100%;
  }

  .c-canvas__sidebar & {
    // margin-top: remify(16px);
  }


  
  .c-snapshot__button,
  .c-snapshot__download-link {
    position: absolute;
    bottom: remify(8px);
    z-index: 100;
  }

  .c-snapshot__button {
    right: 0;
    background-color: transparent;
    border: none;
  }

  .c-snapshot__download-link {
    left: remify(48px);
  }

}

p.c-snapshot__title {
	text-transform: uppercase;
	color: primary(night, 100);
	font-weight: fw(bold);
	margin-top: remify(12px);
  margin-bottom: remify(12px);
  padding-bottom: 0;

}
.c-snapshot__title + .c-snapshot__thumbnail {
	margin-top: 0;
}

.c-snapshot__thumbnail {
  display: block;
  height: remify(200px);
  width: 100%;
  // max-width: remify(300px);
  margin-bottom: remify(12px);
  position: relative;
  
  img {
    width: 100%;
    height: 100%;
  }

  .c-canvas__sidebar & {
    width: 100%;
    max-width: initial;
  }

}

.c-snapshot__lightbox {
	/** Default lightbox to hidden */
  display: none;

  /** Position and style */
  width: remify(600px);
  text-align: center;
	position: absolute;
	z-index: 999;
	top: -50%;
  left: 50%;
  transform: translateX(-50%);
  
  img {
    width: remify(600px);
    height: remify(400px);
  }

}

.c-snapshot__lightbox.is-visible {
  display: block;
}

/*------------------------------------*\
  Video modifier
\*------------------------------------*/

.c-snapshot--video {

  .c-snapshot__thumbnail {
    max-width: initial;
  }

  p {
    text-transform: initial;
  }

  .c-snapshot__thumbnail {
    height: auto;

    iframe {
      width: 100%;
    }

  }

}

/*------------------------------------*\
  Gallery modifier
\*------------------------------------*/

.c-snapshot--gallery {
  // To avoid that .c-snapshot--gallery remains visible when the big gallery is open
  z-index: 0;

  p {
    text-transform: initial;
  }

  .c-snapshot__thumbnail {
    margin-left: auto;
    margin-right: auto;
    max-width: remify(300px);
  }

}