/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * Styling the container (the wrapper)
 *
 * position is used to make this box a containing block (it becomes a reference for its absolutely
 * positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow,
.slideshow {
  position: relative;

  /* width: 748px;
  height: 529px; */
/* Width is set in other sytle sheet to 100%, so I set here height to image's height in pixels */
  height: 529px;
  overflow: hidden;
 /* border: 8px solid #ccc; */
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these
 * images so their edges do not appear in the parent box when we move them inside the said box. Because
 * the images are now larger than their parent container, we use top, left and margin values to align them
 * in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity
 * and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

#slideshow img,
.slideshow > img,
.slideshow .slide {
  position: absolute;
  /* width: 800px; */
  /* height: 400px; */
  top: 0%;
  left: 20%;
  /* margin-left: -400px; */
  margin-left: -20%;
  /* margin-top: -200px; */
  margin-top: -0%;

  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 3s, 10s;
  -moz-transition-property: opacity, -moz-transform;
  -moz-transition-duration: 3s, 10s;
  -ms-transition-property: opacity, -ms-transform;
  -ms-transition-duration: 3s, 10s;
  -o-transition-property: opacity, -o-transform;
  -o-transition-duration: 3s, 10s;
  transition-property: opacity, transform;
  transition-duration: 3s, 10s;
}

.slideshow .slide {
  width: 100%;
  height: 100%;
}

.slideshow .slide img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.auction-feature {
  flex-direction: row-reverse;
}

.auction-slideshow {
  background: #111;
}

.auction-slideshow .slide-caption {
  background: rgba(8, 20, 30, 0.86);
  border: 1px solid rgba(174, 224, 246, 0.55);
  box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  color: #aee0f6;
  font-family: 'Cinzel', serif;
  font-size: 0.9em;
  font-weight: 800;
  left: calc(50% + (var(--caption-x, 0) * 42%));
  letter-spacing: 0;
  line-height: 1.35;
  max-width: calc(100% - 2em);
  overflow-wrap: break-word;
  padding: 0.55em 0.85em;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  top: calc(50% - (var(--caption-y, 0) * 42%));
  transform: translate(-50%, -50%);
  width: max-content;
  z-index: 2;
}

.auction-slideshow .slide[data-caption-position="top"] .slide-caption {
  --caption-y: 0.85;
}

.auction-slideshow .slide[data-caption-position="bottom"] .slide-caption {
  --caption-y: -0.85;
}

.auction-slideshow .slide[data-caption-position="middle"] .slide-caption {
  --caption-x: 0;
  --caption-y: 0;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction.
 * This technique allows us to create various paths while applying the same translate() values to
 * all images (see the 'fx' class further below).
 */

#slideshow img,
.slideshow > img,
.slideshow .slide {
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left;
}

#slideshow :nth-child(2n+1),
.slideshow :nth-child(2n+1) {
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
}

#slideshow :nth-child(3n+1),
.slideshow :nth-child(3n+1) {
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}

#slideshow :nth-child(4n+1),
.slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
 * The rule below moves all images past the second one down the stack.
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

#slideshow .fx:first-child+img~img,
.slideshow .fx:first-child+img~img,
.slideshow .fx:first-child+.slide~.slide {
  z-index: -1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

#slideshow .fx,
.slideshow .fx {
  opacity: 1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}


@media screen and (max-width: 980px) {
  #slideshow,
  .slideshow {
    height: 700px;
  }
}
@media screen and (max-width: 736px) {
  #slideshow,
  .slideshow {
    height: 450px;
  }
}
@media screen and (max-width: 414px) {
  #slideshow,
  .slideshow {
    height: 290px;
  }

  .auction-slideshow .slide-caption {
    font-size: 0.75em;
    max-width: calc(100% - 1.5em);
  }
}

.auction-slideshow-square {
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 640px;
  max-width: 640px;
}

.auction-slideshow-square .slide img {
  object-fit: contain;
}

@media screen and (max-width: 980px) {
  #auction-slideshow {
    text-align: center;
  }

  #auction-slideshow .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #auction-slideshow .auction-slideshow-square {
    margin: 2rem auto 0;
    max-width: 520px;
    width: min(84vw, 520px) !important;
  }
}

@media screen and (max-width: 480px) {
  #auction-slideshow .auction-slideshow-square {
    width: min(88vw, 360px) !important;
  }
}