:root {
  --text-color: rgba(0,0,0,0.86);
  --boxShadow-color: rgba(0,0,0,0.25);
  --overlay-bgcolor: darkgreen;
  --overlay-textColor: rgba(255,255,255,0.96);
}


.galleryOverlayInside {
  display: block;
  /* height: calc(100vh - 12.5rem); /* 10.5rem); /* the inside of gallery */
  position: relative;
  overflow: hidden;
  /* border: 1px solid pink; */
}


.galleryMediaWrapper {
  display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
  height: 100%;
}

.galleryMediaWrapper > div.galleryItem {
	width: 100%;
  height: 100%;
	flex-shrink: 0;
  /* border: 1px solid yellow; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* positioning absolute here to make scroll better! */
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9000;
}

/* active or inactive */
.galleryMediaWrapper > div.galleryItem[data-status="inactive"] {
  transform: translateX(-100%);
}

.galleryMediaWrapper > div.galleryItem > div.imgWrapper {
  /* flex-shrink: 0; */
  width: 100%;
  /* border: 1px solid black; */
  height: calc(100% - 2.5rem);
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0.125)
}
/* Fit image to flex parent */
/* https://stackoverflow.com/questions/37556202/fit-image-into-auto-sized-flex-child */
.galleryMediaWrapper > div.galleryItem > div.imgWrapper > img,
.galleryMediaWrapper > div.galleryItem > div.imgWrapper > video {
  flex: 1 1 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
  object-position: center;
}
.galleryMediaWrapper > div.galleryItem > div.textWrapper {
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: calc(100% - 2.5rem);
  background-color: transparent;
  max-width: 60ch;
  margin: 0px auto;
  overflow-y: scroll;  
}
.galleryMediaWrapper > div.galleryItem > div.captionWrapper {
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* center; */
  font-size: 0.925em;
  line-height: 1.25em;
  color: rgba(255,255,255,0.92);
  font-weight: 300;
}


/* ************************************************************************************ */
/* gallery navigation */

.galleryNavWrapper {
  position: absolute;
  inset: 0 0 3rem 0; /* minus the bottom */
}

.galleryNavWrapper .galleryNavBtn {
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  font-size: 2rem;
}
.galleryNavWrapper .galleryNavBtn a {
  padding: 0.1rem 0.375rem 0.2125rem 0.375rem;
  cursor: pointer;
  border-radius: 50%;
}
.galleryNavWrapper .galleryNavBtn a:hover {
  cursor: pointer;
  background-color: var(--overlay-bgcolor)
}


/* counter */
.galleryCounterWrapper {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  display: none;
}

.counterNumbers {
  display: inline-block;
  opacity: 0.65;
  font-weight: 300;
  margin-left: 1rem;
}

/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */


@media screen {


  .galleryOverlayInside {
    height: calc(100vh - 5.5rem); /* 6.75rem); /* 10.5rem); /* the inside of gallery */
    /* border: 1px solid pink; */
  }
  .galleryNavWrapper .galleryNextBtnWrapper {
    right: -1rem;
    z-index: 9999;
  }
  .galleryNavWrapper .galleryPrevBtnWrapper {
    left: -1rem;
    z-index: 9999;
  }
}



/* ************************************************************************************ */
@media screen and (min-width: 400px) {

  .galleryOverlayInside {
    height: calc(100vh - 6.75rem); /* 6.75rem); /* 10.5rem); /* the inside of gallery */
  }

}


/* ************************************************************************************ */
/* LARGER */

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

  .galleryOverlayInside {
    height: calc(100vh - 8.65rem); /* 9.5rem); */
  }

}


/* ************************************************************************************ */
/* LARGER */

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

  .galleryOverlayInside {
    height: calc(100vh - 11.5rem);
  }

  .galleryNavWrapper .galleryNextBtnWrapper {
    right: -1.5rem;
  }
  .galleryNavWrapper .galleryPrevBtnWrapper {
    left: -1.5rem;
  }

}


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

  .galleryOverlayInside {
    height: calc(100vh - 13.5rem);
  }
  .galleryNavWrapper .galleryNextBtnWrapper {
    right: -2.5rem;
  }
  .galleryNavWrapper .galleryPrevBtnWrapper {
    left: -2.5rem;
  }

}