figma_accordeon_02

style.css

@@ -651,4 +651,48 @@ html, body, * {
   display: block;
   width: 14px;
   height: 16px;
-}
+}
+/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
+.advantage_slider { padding: 40px; display:flex; justify-content:center; }
+.advantage_slider_items { display:flex; gap:28px; }
+
+.advantage_slider_item{
+  position:relative; width:280px; height:420px; border-radius:22px; overflow:hidden; cursor:pointer;
+}
+
+/* Слой CLOSE */
+.advantage_slider_close{
+  position:absolute; inset:0; z-index:1;
+  display:flex; align-items:flex-end; padding:20px; color:#fff;
+  transition:opacity .35s ease;
+}
+.advantage_slider_close img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
+
+/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */
+.advantage_slider_open{
+  position:absolute; 
+  inset:0; z-index:2;
+  background: color:#000; 
+  border-radius:22px;
+  opacity:0; 
+  transform:translateY(16px);
+  pointer-events:none;
+  transition:opacity .35s ease, transform .35s ease;
+  padding:28px 22px; 
+  display:flex;
+}
+.slider_item_inner{ display:flex; flex-direction:column; justify-content:space-between; width:100%; }
+
+/* Активная карточка */
+.advantage_slider_item.active .advantage_slider_open{
+  opacity:1; transform:translateY(0); pointer-events:auto;
+}
+.advantage_slider_item.active .advantage_slider_close{ opacity:0; }
+
+/* простые стили текста */
+.slider_item_index{
+  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
+  border:1px solid currentColor; margin-bottom:12px; font-weight:700;
+}
+.slider_item_title{ font-size:18px; line-height:1.3; }
+.item_inner_text{ font-size:14px; line-height:1.5; }