/* =======================
   ГРУППА 1 — скрыты по умолчанию
   ======================= */
#rec1565048581,
#rec1565609891,
#rec1566617691 {
  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition:
    max-height 0.6s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* ГРУППА 1 — открыто */
body.gals1-opened #rec1565048581,
body.gals1-opened #rec1565609891,
body.gals1-opened #rec1566617691 {
  max-height: 10000px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =======================
   ГРУППА 2 — скрыты по умолчанию
   ======================= */
#rec1566944181,
#rec1567030911,
#rec1566633781 {
  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition:
    max-height 0.6s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* ГРУППА 2 — открыто */
body.gals2-opened #rec1566944181,
body.gals2-opened #rec1567030911,
body.gals2-opened #rec1566633781 {
  max-height: 10000px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Скролл всегда, чтобы не было дёрганий из-за появления скроллбара */
html {
  overflow-y: scroll;
}



/* 👉 В ЭТОМ СПИСКЕ УКАЗЫВАЕМ ВСЕ КНОПКИ, КОТОРЫЕ БУДУТ КРУТИТЬСЯ */
.js-open-gals-1,
.js-close-gals-1,
.js-open-gals-2,
.js-close-gals-2
/* , .js-open-gals-3, .js-close-gals-3 и т.д. — можно дописывать сюда */
{
  transition: transform 0.3s ease;
  transform-origin: center center;
  cursor: pointer;
}

/* первая кнопка — состояние 45° */
.is-rotated-45 {
  transform: rotate(45deg);
}

/* вторая кнопка — состояние 90° */
.is-rotated-90 {
  transform: rotate(90deg);
}