Update spoller.html

spoller.html

@@ -1,18 +1,8 @@
 
 <style>
-  /* Общие стили */
-  .spoiler-wrapper {
-    margin: 20px 0;
-    position: relative;
-  }
-  
-  .spoiler-divider {
-    height: 1px;
-    background-color: #ddd;
-    margin: 10px 0;
-  }
-  
-  .spoiler-button {
+  /* УНИВЕРСАЛЬНЫЕ СТИЛИ */
+  .spoiler1-button, 
+  .spoiler2-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -30,11 +20,13 @@
     gap: 8px;
   }
   
-  .spoiler-button:hover {
+  .spoiler1-button:hover,
+  .spoiler2-button:hover {
     background-color: #e0e0e0;
   }
   
-  .spoiler-content {
+  .spoiler1-content,
+  .spoiler2-content {
     padding: 16px;
     border: 1px solid #ddd;
     border-top: none;
@@ -47,33 +39,24 @@
     flex-shrink: 0;
     transition: transform 0.3s;
   }
-  
-  /* Версия для телефона */
+
+  /* 📱 Адаптив для телефона */
   @media (max-width: 767px) {
-    .spoiler-mobile {
-      display: flex;
-      flex-direction: column;
-    }
-    .spoiler-mobile .spoiler-content {
-      order: 2;
-      border-top: 1px solid #ddd;
-      border-radius: 0 0 4px 4px;
-      margin-top: -4px;
+    .spoiler1-button,
+    .spoiler2-button {
+      font-size: 14px;
+      padding: 10px 12px;
+      gap: 6px;
     }
-    .spoiler-mobile .spoiler-button {
-      order: 1;
-      border-radius: 4px 4px 0 0;
-      margin-bottom: 0;
+    .spoiler1-content,
+    .spoiler2-content {
+      font-size: 14px;
+      padding: 12px;
     }
   }
-
-  /* Версия для десктопа */
-  @media (min-width: 768px) {
-    .spoiler-desktop { display: block; }
-    .spoiler-mobile { display: none; }
-  }
 </style>
 
+
 <!--  Первый блок HTML сдесь класс и ИД боков с номером 1 -->
 
 <div class="spoiler-divider"></div>