actions februar

css/actions.css

@@ -18,7 +18,7 @@
 .customActions__title {
   display: block;
   width: 100%;
-  font-family: "Berlingske Serif";
+  font-family: 'Berlingske Serif';
   font-size: 30px;
   line-height: 1.1;
   font-weight: 600;
@@ -30,7 +30,7 @@
   flex-wrap: wrap;
   align-items: center;
   align-content: center;
-  font-family: "LatoWeb";
+  font-family: 'LatoWeb';
   font-weight: 400;
   border-radius: 15px;
   position: relative;
@@ -71,18 +71,18 @@
 .actionArticle h5,
 .actionArticle h6 {
   display: block;
-  font-family: "LatoWeb" !important;
+  font-family: 'LatoWeb' !important;
   margin: 0 !important;
   width: 100%;
   font-weight: 400;
   line-height: 1.2;
 }
 
 .customActions__item .rub {
-  font-family: "Arial";
+  font-family: 'Arial';
 }
 .customActions__item .font {
-  font-family: "Berlingske Serif" !important;
+  font-family: 'Berlingske Serif' !important;
 }
 .customActions__item .bold {
   font-weight: 500 !important;
@@ -185,7 +185,7 @@
   justify-content: center;
   align-items: center;
   align-content: center;
-  font-family: "LatoWeb", sans-serif;
+  font-family: 'LatoWeb', sans-serif;
   font-weight: 400;
   background-color: var(--gold, #be915a);
   color: #fff;
@@ -410,3 +410,45 @@
     font-size: 16px;
   }
 }
+
+.procentList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  width: 100%;
+  margin-top: 12px;
+  max-width: 292px;
+}
+
+.procentList div span {
+  display: block;
+  width: 100%;
+}
+
+.procentList div {
+  background: #fff;
+  box-sizing: border-box;
+  color: #004a8d;
+  border-radius: 6px;
+  padding: 8px 10px;
+  max-width: 140px;
+}
+
+.procentList div:last-child {
+  max-width: 207px;
+}
+
+@media screen and (max-width: 519px) {
+  .procentList {
+    max-width: 100%;
+  }
+  .procentList div {
+    background: #004a8d;
+    color: #fff;
+    max-width: calc(50% - 6px);
+    width: 100%;
+  }
+  .procentList div:last-child {
+    max-width: 100%;
+  }
+}

index.html

@@ -17,6 +17,68 @@
           <li class="customActions__title">
             <h2>Актуальные акции</h2>
           </li>
+          <!--16-->
+          <li class="customActions__item">
+            <div class="actionArticle">
+              <p class="label">1-2 марта</p>
+              <h3 class="fs--28"><span class="brown">Дни красоты</span> Milar Clinic</h3>
+              <div class="procentList">
+                <div>
+                  <span class="fs--24">-20%</span>
+                  <span class="fs--16">на все аппараты</span>
+                </div>
+                <div>
+                  <span class="fs--24">-50%</span>
+                  <span class="fs--16">инъекции с 3мл</span>
+                </div>
+                <div>
+                  <span class="fs--24">-15%</span>
+                  <span class="fs--16">Rf-лифтинг MORPHEUS8</span>
+                </div>
+              </div>
+              <div class="forBtn">
+                <button class="actionBtn" data-ordermodal="#action-modal" data-title="Дни красоты Milar Clinic! Скидки на процедуры 1-2 марта">Узнать подробнее</button>
+              </div>
+            </div>
+            <picture class="actionBg">
+              <source media="(max-width: 519px)" srcset="./img/16m.jpg" />
+              <source media="(max-width: 520px)" srcset="./img/16.jpg" />
+              <img src="./img/16.jpg" alt="Milar clinic discont" />
+            </picture>
+          </li>
+          <!--17-->
+          <li class="customActions__item">
+            <div class="actionArticle">
+              <p class="label">4 марта</p>
+              <h3 class="fs--26">Клиентский день <br />Germaine de Capuccini</h3>
+              <p class="fs--16">*филиал Королев</p>
+              <div class="forBtn">
+                <button class="actionBtn" data-ordermodal="#action-modal" data-title="Клиентский день 4 марта Germaine de Capuccini">Узнать подробнее</button>
+              </div>
+            </div>
+            <picture class="actionBg">
+              <source media="(max-width: 519px)" srcset="./img/17m.jpg" />
+              <source media="(max-width: 520px)" srcset="./img/17.jpg" />
+              <img src="./img/17.jpg" alt="Milar clinic discont" />
+            </picture>
+          </li>
+          <!--18-->
+          <li class="customActions__item">
+            <div class="actionArticle">
+              <h3 class="fs--28">Дарим процедуру</h3>
+              <p class="label">Премиум спа-ухода лица</p>
+              <p class="fs--16">Первым, кто пополнил депозит <br />на любые услуги клиники <br /><span class="brown">от 100.000</span> <span class="rub brown">&#8381;</span></p>
+              <p class="fs--14">Количество подарков всего 8!</p>
+              <div class="forBtn">
+                <button class="actionBtn" data-ordermodal="#action-modal" data-title="Дарим процедуру премиум спа-ухода лица">Узнать подробнее</button>
+              </div>
+            </div>
+            <picture class="actionBg">
+              <source media="(max-width: 519px)" srcset="./img/18m.jpg" />
+              <source media="(max-width: 520px)" srcset="./img/18.jpg" />
+              <img src="./img/18.jpg" alt="Milar clinic discont" />
+            </picture>
+          </li>
           <!--1-->
           <li class="customActions__item">
             <div class="actionArticle">