add single page rfo

frontend/src/main.js

@@ -28,6 +28,9 @@ import './styles/rfo/rfo.css';
 import './styles/rfo/search-rfo.css';
 import './styles/rfo/featured.css';
 import './styles/rfo/social.css';
+import './styles/rfo/article.css';
+import './styles/rfo/breadcrumbs.css';
+
 
 import './scripts/calendar.js';
 import './scripts/menu-vertical.js';

frontend/src/styles/rfo/article.css

@@ -0,0 +1,65 @@
+.articles-preview-rfo{
+    display: flex; /* Активируем Flexbox */
+    justify-content: space-between; /* Равномерное распределение пространства между колонками */
+    /* или можно использовать justify-content: space-around; */
+    gap: 10px; /* Расстояние между колонками */
+}
+
+.article-item-wrapper__rfo{
+    flex: 1;
+    background-color: white;
+    width: 100%;
+    border: 6px solid white;
+    border-radius: 14px;
+}
+
+.article-item-rfo{
+    position: relative; 
+    height: 409px;
+  background: #f1f3eb; /* пример фона */
+
+  /* МАСКА через встроенный data URI */
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>');
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: cover;
+
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>');
+  mask-repeat: no-repeat;
+  mask-size: cover;
+}
+
+.article-section-title__rfo{
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 150%;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.article-rfo-details{
+    position: absolute;
+      bottom: 12px;  
+      right: 20px;
+      display: flex;
+      gap: 8px;
+      color: #333;
+      font-size: 1.6rem;
+      font-weight: 500;
+}
+
+.article-show-next__rfo{
+    border-radius: 10px;
+    margin: 22px 0;
+    padding: 15px 25px;
+    font-weight: 500;
+    font-size: 1.8rem;
+    text-align: center;
+    width: 100%;
+    background-color: white;
+}
+
+
+
+
+  

frontend/src/styles/rfo/rfo.css

@@ -48,7 +48,7 @@
   }  
 
 .content-rfo{
-    margin-top: -152px;
+    margin-top: -222px;
     width: 1200px;
     max-width: 1200px;
   }