/* =======================
   ГРУППА 1 — скрыты по умолчанию
   ======================= */
#rec1836381331,
#rec1841233851,
#rec1836381351 {
  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 #rec1836381331,
body.gals1-opened #rec1841233851,
body.gals1-opened #rec1836381351 {
  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-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);
}