cards vniigaz v2

src/vniigaz-v2/css/_pages-section.scss

@@ -232,6 +232,212 @@ cards-section-items{
     }
 }
 
+
+
+
+
+
+
+
+// cards 
+
+
+
+
+
+
+.cards-section-default{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 40px;
+  cards-section-item{
+    flex-basis: 340px;
+    flex-shrink: 1;
+  }
+  .alternative{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .card-header{
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 125%;
+      color: var(--bk44);
+      order: 1;
+      text-align: center;
+    }
+    .card-image{
+      width: 120px;
+      height: 120px;
+      object-fit: scale-down;
+    }
+    .card-subheader, .card-text{
+      display: none;
+    } 
+  }
+  .default{
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    margin-bottom: -8px;
+    .card-image{
+      width: 100%;
+      max-height: 212px;
+      height: calc(( 100vw - 32px ) * 0.62);
+      border: 1px solid var(--bk22);
+      border-radius: 8px;
+      object-fit: cover;
+    }
+    .card-subheader{
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 27px;
+      color: var(--bk66);
+      order: 1;
+      margin-top: 16px;
+    }
+    .card-header{
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 125%;
+      color: var(--bk44);
+      order: 2;
+      margin-top: 8px;
+    }
+    .card-text{
+      display: none;
+    }
+    &::after{
+      order: 3;
+      content: '';
+      width: 120px;
+      height: 24px;
+      background-image: url(/assets/images/ico/arrow_forward_24.svg);
+    }
+    &:hover{
+      .card-image{
+        border-color:  var(--bk44);
+      }
+      .card-subheader{
+        color: var(--bk88); 
+      }
+      .card-header{
+        color: var(--bk66); 
+      }
+      &::after{
+        background-image: url(/assets/images/ico/arrow_forward_24_hover.svg);
+      }
+
+
+    }
+  }
+}
+
+.cards-section-slides.items{
+  max-width: 588px;
+  margin-left: 0;
+  cards-section-item{
+    margin-bottom: 40px;
+    height: 348px;
+    border: 1px solid var(--prime);
+    background: var(--bg);
+    overflow: hidden;
+  }
+
+}
+
+.cards-section-slides{
+  width: 100%;
+  max-width: 100vw;
+  margin-left: -50px;
+  padding-bottom: 32px ;
+  cursor: pointer;
+  .swiper-slide{
+    display: flex;
+    width: 588px;
+  }
+  cards-section-item{
+    display: flex;
+    width: 100%;
+    height: 274px;
+    padding: 24px;
+    border-radius: 16px;
+    border: 1px solid var(--second);
+    background: var(--bg);
+    overflow: hidden;
+    .card-slide{
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      .card-header{
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 125%;
+        color: var(--bk66);
+        flex-basis: 100%;
+        margin-bottom: 16px;
+      }
+      .card-image{
+        width: 120px;
+        height: 170px;
+        object-fit: cover;
+        display: block;
+        top: 56px;
+        border-radius: 8px;
+        border: 1px solid var(--second);
+        order: 1;
+        margin-bottom: -120px;
+      }
+      .card-text{
+        order: 2;
+        flex-shrink: 1;
+        flex-basis: calc( 100% - 136px );
+        color: var(--bk88);
+        font-family: PT Sans;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 27px;
+        margin-inline-start: 16px;
+      }
+      .card-subheader{
+        text-align: right;
+        font-family: PT Sans;
+        font-size: 16px;
+        font-style: italic;
+        font-weight: 400;
+        line-height: 24px;
+        color: var(--bk66);
+        order: 3;
+        white-space: pre-wrap;
+      }
+    }
+  }
+
+
+}
+
+
+
+
+
+
+
+// cards 
+
+
+
+
+
+
+
+
 images-section{
   display: block;