@charset "utf-8";

.gallery {
  margin-top: 150px;
  padding-bottom: 80px;
}
.gallery__tablist {
  gap: 10px;
}
.gallery__tab {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 400px;
  min-height: calc(100 / 34 * 1em);
  box-sizing: border-box;
  padding: .25em;
  font-size: clamp(24px, calc(34 / 1200 * 100vw), 34px);
  letter-spacing: .03em;
}
.gallery__tab::before,
.gallery__tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}
.gallery__tab::before {
  background: rgba(184, 184, 184, 1);
  opacity: .85;
}
.gallery__tab::after {
  background: var(--color-gradient);
  opacity: 0;
}
.gallery__tab.active::before {
  opacity: 0;
}
.gallery__tab.active::after {
  opacity: .85;
}
.gallery__tabpanel {
  padding-block: 100px;
  background: var(--color-gradient);
}
.gallery__slide {
  overflow: hidden;
}
.gallery__slide__btn {
  width: 50px;
  --swiper-navigation-size: 50px;
  border-radius: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19.839" height="6.951" viewBox="0 0 19.839 6.951"><polygon points="19.839 3.154 1.556 3.154 5.24 .522 4.866 0 0 3.476 4.866 6.951 5.24 6.429 1.556 3.797 19.839 3.797 19.839 3.154" fill="%23fff"/></svg>') no-repeat center/20px auto #4A4433;
}
.gallery__slide__btn--prev {
  transform: translateX(20px);
}
.gallery__slide__btn--next {
  transform: translateX(-20px) rotate(180deg);
}
.gallery__thumb {
  margin-top: 20px;
  overflow: hidden;
}
.gallery__thumb__item {
  cursor: pointer;
}
.gallery__thumb__item-photo {
  position: relative;
  z-index: 1;
}
.gallery__thumb__item-desc {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(0, 0, 0, .7);
}
.swiper-slide-thumb-active .gallery__thumb__item-desc {
  opacity: 0;
}
.gallery__thumb__item-name {
  font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
  letter-spacing: .03em;
}
@media (hover: hover){
  .gallery__tab::before,
  .gallery__tab::after {
    transition: opacity .4s;
  }
  .gallery__tab:hover::before {
    opacity: 0;
  }
  .gallery__tab:hover::after {
    opacity: .85;
  }
  .gallery__thumb__item-desc {
    transition: opacity .4s;
  }
  .gallery__thumb__item:hover .gallery__thumb__item-desc {
    opacity: 0;
  }
}
@media screen and (max-width: 619px){
  .gallery {
    margin-top: 80px;
    padding-bottom: 40px;
  }
  .gallery__tablist {
    gap: 6px;
    overflow: hidden;
  }
  .gallery__tab {
    min-height: calc(60 / 20 * 1em);
    font-size: min(calc(20 / 375 * 100vw), 20px);
  }
  .gallery__tabpanel {
    padding-block: 40px;
  }
  .gallery__slide {
    overflow: visible;
  }
  .gallery__slide__btn {
    width: 40px;
    --swiper-navigation-size: 40px;
    background-size: 15px;
  }
  .gallery__slide__btn--prev {
    transform: translateX(-50%);
  }
  .gallery__slide__btn--next {
    transform: translateX(50%) rotate(180deg);
  }
  .gallery__thumb {
    margin-top: 10px;
  }
  .gallery__thumb__item-name {
    font-size: min(calc(13 / 375 * 100vw), 13px);
  }
}