/*********************************************************************************
/*
/* image wrappers
/*
/********************************************************************************/

.img-wrapper {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 10px;
}

.img-wrapper span {
  margin: 6px;
  width: 100%;
}

@media screen and (min-width: 432px) {

  .img-wrapper {
    flex-direction: row;
  }

  .img-wrapper span {
    flex: 1 1 50%;
  }
}

@media screen and (min-width: 660px) {

  .img-wrapper.triple span {
    flex: 1 1 33%;
  }
}

@media screen and (min-width: 660px) {

  .img-wrapper.sextuple span {
    flex 1 1 16.6%;
  }
}

/*********************************************************************************
/*
/* images
/*
/********************************************************************************/

img {
  display: block;
  margin: 0 auto;

  width: 100%;
  max-width: 720px;
  height: auto;
  vertical-align: middle;

  border-radius: 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;

  cursor: pointer;
}


section img {
  margin: 12px auto;
}



img:not(.lightbox-can-open){
  cursor: default;
}

.img-max-width {
  display: block;
  margin: 0 auto;

  max-width: 720px;
  height: auto;

  vertical-align: middle;

  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

/*********************************************************************************
/*
/* progressive load images
/*
/* https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/
/*
/********************************************************************************/

.progressive {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  outline: none;
  margin: 12px auto;

  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.progressive img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 none;
  margin: 0 auto !important;
}

.progressive img.preview {
  width: 100%;
  height: auto;
  filter: blur(10px);
}

.progressive img.reveal {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
  animation: reveal 1s ease-out;
  margin: 0 auto !important;
}

.progressive .dummy {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 70%;
}

@keyframes reveal {
  0% {transform: scale(1.00); opacity: 0;}
  100% {transform: scale(1.00); opacity: 1;}
}

/*********************************************************************************
/*
/* videos
/*
/********************************************************************************/

video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  outline: none;
  margin: 12px auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}