/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0.1% and not dead
*/

:root {
  --gallery-general-max-width: 720px;
  --gallery-general-background: linear-gradient(270deg, var(--second-color-opacity-70) 0%, var(--second-color-opacity-00) 50%, var(--second-color-opacity-70) 100%);

  --gallery-controls-button-background: var(--second-color-opacity-60);

  --gallery-item-border-radius: var(--border-radius);

  --gallery-thumbnails-padding-top: 48px;

  --gallery-thumbnails-item-image-border-radius: var(--border-radius);
  --gallery-thumbnails-item-image-border-width: 1px;
  --gallery-thumbnails-item-image-border: var(--gallery-thumbnails-item-image-border-width) solid var(--accent-color);

  --gallery-thumbnails-item-name-font-size: 14px;
  --gallery-thumbnails-item-name-line-height: 20px;
  --gallery-thumbnails-item-name-margin-top: 24px;
}

.gallery__general {
  display: block;
  position: relative;
  overflow: hidden;
}
.gallery__general:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gallery-general-background);
  pointer-events: none;
  z-index: 1;
}

.gallery {
  overflow: hidden;
}

.gallery__general .gallery {
  max-width: var(--gallery-general-max-width);
  overflow: visible;
  margin: 0 auto;
}

.gallery__list {
  display: flex;
  position: relative;
  align-items: stretch;
  overflow: hidden;
}

.gallery__thumbnails {
  padding: var(--gallery-thumbnails-padding-top) 0 0 0;
}

.gallery__item {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--gallery-item-border-radius);
  cursor: pointer;
  transition: all 0.25s;
}

.gallery__image svg {
  display: block;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: auto !important;
  z-index: 1;
}
.gallery__image svg use {
  fill: var(--accent-color);
}

.wrapper.gallery-item__image-wrapper {
  padding-bottom: 56.25%;
}

.wrapper.gallery-item__image-wrapper iframe {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.gallery__name {
  font-size: var(--gallery-thumbnails-item-name-font-size);
  line-height: var(--gallery-thumbnails-item-name-line-height);
  margin-top: var(--gallery-thumbnails-item-name-margin-top);
}

.gallery__thumbnails .gallery__item .gallery__image:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--gallery-thumbnails-item-image-border-radius);
  border: var(--gallery-thumbnails-item-image-border);
  opacity: 0;
  transition: all 0.25s;
  z-index: 1;
}

.gallery__thumbnails .gallery__item:hover .gallery__image:before,
.gallery__thumbnails .gallery__item.active .gallery__image:before,
.gallery__thumbnails .glide__slide--active .gallery__image:before {
  opacity: 1;
}

.gallery__thumbnails .gallery__item:hover .gallery__image img,
.gallery__thumbnails .gallery__item.active .gallery__image img,
.gallery__thumbnails .glide__slide--active .gallery__image img {
  -webkit-transform: scale(0.95, 0.925);
          transform: scale(0.95, 0.925);
}

.gallery__thumbnails .gallery__item.active,
.gallery__thumbnails .glide__slide--active {
  cursor: default;
}

.image.gallery__image > * {
  width: 100%;
}

.gallery__thumbnails .gallery__list {
  align-items: flex-start;
}



@media screen and (min-width: 1900px) {
  :root {
    --gallery-general-max-width: 37.5vw;

    --gallery-thumbnails-padding-top: 2.5vw;

    --gallery-thumbnails-item-image-border-width: 0.05vw;

    --gallery-thumbnails-item-name-font-size: 0.73vw;
    --gallery-thumbnails-item-name-line-height: 1.04vw;
    --gallery-thumbnails-item-name-margin-top: 1.25vw;
  }
}



@media screen and (max-width: 1000px) {
  :root {
    --gallery-thumbnails-padding-top: 12px;
  }
}



@media screen and (max-width: 700px) {
  .gallery__name {
    display: none;
  }
}



@media screen and (max-width: 600px) {
  .gallery__thumbnails .gallery {
    overflow: visible;
  }

  .controls.gallery__controls {
    padding: 20px;
  }
}



@media screen and (max-width: 500px) {
  :root {
    --gallery-thumbnails-item-active-padding: 3px;
  }
}