@charset "UTF-8";
/* Галерея с миниатюрами. Фото 280 / 560 / 760, скругление 20.
   Телефон — миниатюры 56×48 и контурные стрелки 48 под фото; md/xl — поверх фото снизу
   (миниатюры 80×64 / 160×120, стрелки 56 полупрозрачные, по наведению белые — в макете белая «вперёд» — это hover).
   Наборы стрелок два — для светлого фона и поверх фото, видим один.
   --tabs — табы категорий (tab --white) вместо миниатюр: телефон — лентой над фото (в край экрана),
   стрелки под фото по центру; md/xl — табы поверх фото слева снизу, стрелки справа.
   --compact — галерея внутри материала («Статья детально»): без полей, фото 220 / 400 / 480 (r 12 / 12 / 20),
   миниатюры 48 / 64 / 68×96 (r 8), на md/xl миниатюры и стрелки поверх фото с полем 20.
   --center — без миниатюр, стрелки по центру («Мероприятие детально»): без полей, фото 240 / 480 / 640
   (r 16 / 20 / 20), на md/xl стрелки поверх фото снизу с полем 20. */
.gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 5rem;
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .gallery {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .gallery {
    padding-inline: 1.75rem;
  }
}
.gallery__frame {
  height: 17.5rem;
  overflow: hidden;
  background-color: var(--color-blue);
  border-radius: var(--radius-20);
}
@media (min-width: 768px) {
  .gallery__frame {
    height: 35rem;
  }
}
@media (min-width: 1280px) {
  .gallery__frame {
    height: 47.5rem;
  }
}
.gallery__slider {
  height: 100%;
}
.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 23%;
}
.gallery__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .gallery__bar {
    position: absolute;
    inset: auto 2.75rem 6.375rem;
    z-index: 2;
  }
}
@media (min-width: 1280px) {
  .gallery__bar {
    inset: auto 3.5rem 6.75rem;
  }
}
.gallery__thumbs {
  display: flex;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .gallery__thumbs {
    gap: 0.5rem;
  }
}
.gallery__thumb {
  width: 3.5rem;
  height: 3rem;
  overflow: hidden;
  border-radius: var(--radius-8);
  transition: opacity var(--transition-duration) var(--transition-ease);
}
@media (hover: hover) {
  .gallery__thumb:hover {
    opacity: 0.8;
  }
}
.gallery__thumb:focus-visible {
  opacity: 0.8;
}
@media (min-width: 768px) {
  .gallery__thumb {
    width: 5rem;
    height: 4rem;
  }
}
@media (min-width: 1280px) {
  .gallery__thumb {
    width: 10rem;
    height: 7.5rem;
    border-radius: var(--radius-16);
  }
}
.gallery__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery--tabs .gallery__bar {
  justify-content: center;
}
@media (min-width: 768px) {
  .gallery--tabs .gallery__bar {
    justify-content: flex-end;
  }
}
.gallery__tabs {
  display: flex;
  gap: 0.25rem;
  --gallery-gutter: 0.875rem;
}
@media (min-width: 768px) {
  .gallery__tabs {
    --gallery-gutter: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .gallery__tabs {
    --gallery-gutter: 1.75rem;
  }
}
.gallery__tabs {
  padding-inline: var(--gallery-gutter);
  margin-inline: calc(var(--gallery-gutter) * -1);
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery__tabs::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .gallery__tabs {
    position: absolute;
    bottom: 6.375rem;
    left: 2.75rem;
    z-index: 3;
    padding-inline: 0;
    margin-inline: 0;
    overflow: visible;
  }
}
@media (min-width: 1280px) {
  .gallery__tabs {
    bottom: 6.75rem;
    left: 3.5rem;
  }
}
.gallery__controls {
  display: flex;
  gap: 0.25rem;
}
.gallery__controls--dark {
  display: none;
}
@media (min-width: 768px) {
  .gallery__controls--light {
    display: none;
  }
  .gallery__controls--dark {
    display: flex;
  }
}
.gallery--compact {
  padding: 0;
}
.gallery--compact .gallery__frame {
  height: 13.75rem;
  background-color: transparent;
  border-radius: var(--radius-12);
}
@media (min-width: 768px) {
  .gallery--compact .gallery__frame {
    height: 25rem;
  }
}
@media (min-width: 1280px) {
  .gallery--compact .gallery__frame {
    height: 30rem;
    border-radius: var(--radius-20);
  }
}
@media (min-width: 768px) {
  .gallery--compact .gallery__bar {
    inset: auto 1.25rem 1.25rem;
  }
}
@media (min-width: 768px) {
  .gallery--compact .gallery__thumbs {
    gap: 0.25rem;
  }
}
@media (min-width: 1280px) {
  .gallery--compact .gallery__thumbs {
    gap: 0.5rem;
  }
}
.gallery--compact .gallery__thumb {
  width: 3rem;
  height: 3rem;
}
@media (min-width: 768px) {
  .gallery--compact .gallery__thumb {
    width: 4rem;
    height: 4rem;
  }
}
@media (min-width: 1280px) {
  .gallery--compact .gallery__thumb {
    width: 4.25rem;
    height: 6rem;
    border-radius: var(--radius-8);
  }
}
.gallery--center {
  padding: 0;
}
.gallery--center .gallery__frame {
  height: 15rem;
  background-color: transparent;
  border-radius: var(--radius-16);
}
@media (min-width: 768px) {
  .gallery--center .gallery__frame {
    height: 30rem;
    border-radius: var(--radius-20);
  }
}
@media (min-width: 1280px) {
  .gallery--center .gallery__frame {
    height: 40rem;
  }
}
.gallery--center .gallery__bar {
  justify-content: center;
}
@media (min-width: 768px) {
  .gallery--center .gallery__bar {
    inset: auto 1.25rem 1.25rem;
  }
}