<!-- Code by Fedyaeva -->
:root {
  /*  
    1 переменная: z-index аккордеона. -1 указан, чтобы он не перекрывал другие элементы
    2 переменная: позиция от верхней границы при 320px
    3 переменная: отступ у аккордеона снизу. необходим, чтобы при открытии пунктов не прилипал к низу блока
  */
  --acc-z-index: -1;
  --acc-padding-top: 100px;
  --acc-padding-bottom: 20px;

  
  /*  
    1 переменная: отступ между колонками, когда сделаны две
    2 переменная: шрифт в аккордеоне.
    3 переменная: фоновый цвет в аккордеоне
    4 переменная: горизонтальный отступ между пунктами. если нужно убрать совсем напиши -1px
    5 переменная: обводка. если не нужна можно написть none
    6 переменная: скругление углов
    7 переменная: выравнивание в аккордеоне. left или center
  */
  --col-margin: 10px;
  --font-name: "Arial";
  --background-color: #fff;
  --space-between: 10px;
  --border: 1px solid #000;
  --border-radius: 40px;
  --align: center;

  
  /* 
    Управление заголовком:
    1 переменная: размер заголовка
    2 переменная: жирность
    3 переменная: цвет
    4 переменная: отступ в аккордеоне. 20px - верх/низ. 24px - слева/справа
    5 переменная: фоновой цвет заголовочной части
    6 переменная: максимальная длина заголовочной части. указываем, чтобы на большом экране текст не растянулся на всю ширину
    7 переменная: цвет заголовка при наведении
  */
  --title-font-size: 20px;
  --title-font-weight: 400;
  --title-color: #000;
  --title-padding: 20px 24px;
  --title-background-color: #f1f1f1;
  --title-max-width: 800px;
  --title-hover: #777;
  
  
  /*  
    Иконка:
    1 переменная: ширина иконки
    2 переменная: высота иконки
    3 переменная: цвет иконки
    4 переменная: смещение иконки справа. соответствует значению --title-padding left/right
  */
  --icon-width: 30px;
  --icon-height: 30px;
  --icon-color: #000;
  --icon-right-pos: 24px;
  
  
  /*  
    1 переменная: отступ контентной части
    2 переменная: размер текста контента
    3 переменная: жирность
    4 переменная: цвет
    5 переменная: максимальная ширина контента. можно указать 100%
    6 переменная: выравнивание контента относительно контейнера. auto - выравнивает по центру, 0 прижимает к левому краю
  */
  --content-padding: 20px 24px;
  --content-font-size: 16px;
  --content-font-weight: 400;
  --content-color: #000;
  --content-max-width: 800px;
  --content-align: auto;
}


/* Замени на ID своего блока, цифры тоже стащи из ID */
/* Важно, что писать тут класс вместо ID нельзя */
#rec643474112 .t396 [data-artboard-recid="643474112"] {
  height: auto !important;
  overflow: visible !important;
}


/* 
  Раскомментируй эту строчку, чтобы победить автоскейл в Firefox 
  Не забудь заменить ID на свой.
  Выдели весь кусок и нажми ctrl + /
*/
/* @-moz-document url-prefix() {
   #rec643474112 {
     position: relative;
     z-index: 10;
  
     .accordeon__container .tn-atom {
       background-color: var(--background-color);
     }
  }  
} */


/* 
  Медиазапросы указаны для основных разрешений в зеро блоке. Удаляй лишние или добавляй свои. Я на всякий добавила для 1920
  Внутри можно поменять размер заголовка, текста, отступы.
  Важно указать правильные позиции блока с кодом от верхней границы для каждого разрешения
*/
@media screen and (min-width: 480px) and (max-width: 640px) {
  :root {
    --acc-padding-top: 100px;
    --acc-padding-bottom: 20px;
    --title-font-size: 22px;
    --content-font-size: 16px;
    --title-padding: 30px 24px;
  }
}
@media screen and (min-width: 640px) and (max-width: 980px) {
  :root {
    --acc-padding-top: 100px;
    --acc-padding-bottom: 20px;
    --title-font-size: 24px;
    --content-font-size: 16px;
    --title-padding: 30px 24px;
  }
}
@media screen and (min-width: 980px) and (max-width: 1200px) {
  :root {
    --acc-padding-top: 100px;
    --acc-padding-bottom: 20px;
    --title-font-size: 24px;
    --content-font-size: 18px;
    --title-padding: 30px 24px;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --acc-padding-top: 100px;
    --acc-padding-bottom: 20px;
    --title-font-size: 24px;
    --content-font-size: 18px;
    --title-padding: 30px 24px;
  }
}
@media screen and (min-width: 1920px) {
  :root {
    --acc-padding-top: 100px;
    --acc-padding-bottom: 20px;
    --title-font-size: 24px;
    --content-font-size: 18px;
    --title-padding: 30px 24px;
    --title-padding: 20px 24px;
  }
}

/* Если тебе нужны только границы сверху и снизу, то удали border и раскоментируй обводку снизу и сверху */
.accordion__item {
  border: var(--border);
/*   border-top: var(--border);
  border-bottom: var(--border);  */
}
.accordion__item[open] .accordion__icon {
  transform: rotate(45deg);
}


/* Это трогать уже не нужно */
@media screen and (min-width:980px){.accordion{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--col-margin);z-index:var(--acc-z-index)}.accordion__col{flex:1 1 calc(50% - var(--col-margin))}}details summary::-webkit-details-marker{display:none}summary{list-style:none}.accordion__container{padding:var(--acc-padding-top) 0 var(--acc-padding-bottom) 0}.accordion__col:last-child__item:last-child{margin-bottom:100px}.accordion__item{margin:0 0 var(--space-between) 0;background-color:var(--background-color);border-radius:var(--border-radius);font-family:var(--font-name);text-align:var(--align);overflow:hidden}.accordion__item img{width:100%;height:auto;object-fit:cover}@media screen and (max-width:728px){.accordion__item{text-align:left}}.accordion__header{position:relative;display:flex;justify-content:var(--align);align-items:center;gap:14px;padding:var(--title-padding);background-color:var(--title-background-color);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}@media screen and (max-width:980px){.accordion__header{justify-content:space-between}}.accordion__title{margin:0;font-size:var(--title-font-size);font-weight:var(--title-font-weight);max-width:var(--title-max-width);color:var(--title-color);text-wrap:balance;transition:all 0.2s ease-in}.accordion__title:hover{color:var(--title-hover)}.accordion__icon{display:flex;align-items:center;transition:all 0.2s linear}@media screen and (min-width:980px){.accordion__icon{position:absolute;top:0;right:var(--icon-right-pos);height:100%}}.accordion__icon svg{width:var(--icon-width);height:var(--icon-height)}.accordion__icon svg .svg__line{stroke:var(--icon-color)}.accordion__content{padding:var(--content-padding);font-size:var(--content-font-size);font-weight:var(--content-font-weight);color:var(--content-color);margin:var(--content-align);max-width:var(--content-max-width);overflow:hidden;overflow:clip}