.articles-preview-rfo{
    display: flex; /* Активируем Flexbox */
     /* Равномерное распределение пространства между колонками */
    /* или можно использовать justify-content: space-around; */
    gap: 10px; /* Расстояние между колонками */
    width: 100%;
}

.articles-columns-rfo{
    display: flex; /* Активируем Flexbox */
     /* Равномерное распределение пространства между колонками */
    /* или можно использовать justify-content: space-around; */
    gap: 10px; /* Расстояние между колонками */
    flex-wrap: wrap;
    width: 100%;
}


.article-item-wrapper__rfo{
    /* flex: 0 0 auto; Запрещаем растягивание и сжатие */
    background-color: white;
    border-width: 4px 4px 4px 4px; /* top right bottom left */
    border-style: solid;               /* Общий стиль для всех сторон */
    border-color: white;                /* Общий цвет */
    border-radius: 14px;
    overflow: hidden; 
}

.article-short-wrapper__rfo{
    /* flex: 0 0 auto; Запрещаем растягивание и сжатие */
    background-color: white;
    border-width: 6px 6px 6px 6px; /* top right bottom left */
    border-style: solid;               /* Общий стиль для всех сторон */
    border-color: white;                /* Общий цвет */
    border-radius: 14px;
    width: 100%;
}

.article-item-rfo{
    position: relative; 
    
    height: 409px;
    width: 390px;
    background: #f1f3eb; /* пример фона */
    clip-path: path('M6.79428 0L380.205 0C385.042 0 388.999 3.9499 388.999 8.77793V34.6476V374.353V400.222C388.999 405.05 385.042 409 380.205 409H227.707C221.54 409 220.385 405.144 217.499 400.222L211.392 389.805C209.382 386.378 205.127 383.509 201.559 383.13H6.79426C1.95665 383.13 -2 379.181 -2 374.352V8.77756C-2 3.94952 1.95667 0 6.79428 0Z'); /** -webkit-mask-image: var(--article-item-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: var(--article-item-mask);
    mask-repeat: no-repeat;
    mask-size: cover;**/
    
    
}


.item-rfo-zh{
    fill: var(--zheltyy);
    background: var(--zheltyy);
}

.item-rfo-zel{
    fill: var(--zelenyy);
    background: var(--zelenyy);
}


.post-title__rfo{
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 150%;
    text-transform: uppercase;
}

.post-excerpt__rfo{
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 150%;
}


.article-section-title__rfo{
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
    text-transform: uppercase;
    text-align: center;
    margin: 12px 0;
}

.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;
}

.mobile-title-rfo{

   padding: 22px 0;

}


.mobile-excerpt__rfo{
    font-weight: 700;
    font-size: 1.4rem;
}

.related-posts{
    display: flex;
    flex-direction: column;
    justify-content: center; /* центрирование по горизонтали */
}

.pagination__rfo {
  border-top: none!important;
}

.has-video {
    position: relative;
  }
  
.has-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    background-image: var(--video-play-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    pointer-events: none; /* не блокирует клик по ссылке */
    z-index: 2;
}


.article-rfo-details-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712' stroke='%23006842' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
  


/* Мобильные (1 в ряд) */
@media (max-width: 768px) {

    .articles-preview-rfo{
        width: 100%;
    }
    .article-item-wrapper__rfo {
        width: 100%; /* На мобильных - на всю ширину */
    }

    
    
    .article-item-rfo {
        position: relative;
        flex-shrink: 0;
        width: 100%; /* или любой нужный вам размер */
        aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
        background: #f1f3eb;

        clip-path: none;

        /* Маска с сохранением пропорций */
        -webkit-mask-image: var(--article-mob-mask);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-image: var(--article-mob-mask);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;

      }


      .article-short-rfo{
        position: relative; 
        flex-shrink: 0;
        width: 100%;
        height: auto;
        background: #D4D4D4; /* пример фона */
        aspect-ratio: 257 / 141;
        -webkit-mask-image: var(--article-short-mob-mask);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;
        mask-image: var(--article-short-mob-mask);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        /*clip-path: path('M0 0H373V180H0V0Z'); /* Простой прямоугольник с скруглёнными углами 
        clip-path: inset(0 round 10px);  Скругление углов (поддержка хуже) */
    }

    .article-single--rfo{
        flex-direction: column;
        gap: 4px;
    }

    .article-info--rfo{
        flex: 0;
        padding: 10px 0;
    }

    .articles-preview-rfo{
        flex-direction: column;
        gap: 4px;
    }

    .article-item__rfo{
        padding: 3rem;
    }

    .post-title__rfo{
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .post-excerpt__rfo{
        font-size: 1.5rem;
    }

    
}    










  