/* .fancybox__main-panel {
  /* flex: 0 0 auto;
  min-height: 0;
  margin: auto;
  position: relative; 

  display: grid;
  grid-template-columns: auto;  */
  
} */
.fancybox__slide {
	background-color: #161616;

/* Example of aspect ratio hack before `aspect-ratio` has good browser support, see https://caniuse.com/mdn-css_properties_aspect-ratio  */
@media (min-aspect-ratio: 16/9) {
  .fancybox__main-panel {
    width: calc((100vh - 64px * 2) * 16 / 9);
    height: calc(100vh - 64px * 2);
  }
}

@media (max-aspect-ratio: 16/9) {
  .fancybox__main-panel {
    height: calc((100vw - 64px * 2) * 9 / 16);
    width: calc(100vw - 64px * 2);
  }
}

.fancybox__left-panel {
  color: #222;
  background: #fff;
  overflow: auto;
  padding: 0.5rem;
}

.fancybox__spinner {
  color: #222;
}

.fancybox__carousel {
  overflow: hidden;
  margin: 0;
  background: #f9fafb;
}

.fancybox__slide {
  padding: 0;
}

.carousel__button.is-close {
  top: 8px;
  right: 8px;
}

.fancybox__carousel .carousel__dots {
  top: calc(100% - 22px);
  color: #fff;
  z-index: 20;
}
.fancybox__caption {
  /* padding: 1rem 4rem 0 4rem; */
  /* font-size: 1rem;
  line-height: 1.5rem; */
  color: #161616;
}