/* Устанавливаем общий фон для всего сайта 
body.site {
    background-image: url('/images/fon_site_osnova.jpg'); /* ПУТЬ К КАРТИНКЕ 
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Делаем основной контейнер прозрачным, чтобы видеть фон 
.site-grid {
    background-color: rgba(255, 255, 255, 0.5) !important; /* 0.5 — это прозрачность белого фона 
}
*/

/* --- ТВОИ СУЩЕСТВУЮЩИЕ СТИЛИ ФОНА --- */

/* --- ТВОИ СТИЛИ ФОНА (ОСТАВЛЯЕМ) --- */
body.site {
    background-image: url('/images/fon_site_osnova.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
.site-grid { background-color: rgba(255, 255, 255, 0.5) !important; }

/* --- ОБНОВЛЕННЫЙ СТИЛЬ КАРТОЧЕК С ВНУТРЕННИМИ ОТСТУПАМИ --- */

.blog-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px;
}

.blog-item {
    background: #ffffff !important;
    border-radius: 12px;
    
    /* ОТСТУПЫ ВНУТРИ БЛОКА (от края карточки до текста) */
    padding: 15px !important; 
    
    /* ОТСТУПЫ СНАРУЖИ (между блоками) */
    margin: 10px; 
    
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    box-sizing: border-box; /* Чтобы отступы не раздували ширину */
}

/* Стили заголовка внутри блока */
.blog-item .page-header h2 {
    margin: 10px 0 !important; /* Отступ заголовка сверху и снизу */
    font-size: 1.3rem !important;
    font-weight: 700;
}

/* Стили текста внутри блока */
.blog-item .article-introtext {
    padding: 0 5px !important; /* Небольшой боковой отступ для самого текста */
    margin-bottom: 20px;
    line-height: 1.6;
    color: #444;
}

/* Кнопка внизу блока */
.readmore .btn.btn-primary {
    display: block;
    width: calc(100% - 10px); /* Кнопка почти во всю ширину с учетом отступов */
    margin: 0 auto 5px auto;
    background-color: #ffcc00 !important;
    color: #000 !important;
    border: none !important;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
}

.blog-item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}




/* Работаем с контейнером figure, который содержит картинку */
figure.left.item-image {
    max-width: 600px;    /* Ширина контейнера с фото */
    width: 100%;         /* Для гибкости */
    float: left !important; /* Прижимаем влево */
    margin-right: 10px !important; /* Отступ текста справа */
    margin-bottom: 10px; /* Отступ текста снизу */
    margin-left: 0;
}

/* Настраиваем саму картинку внутри этого контейнера */
figure.left.item-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px; /* Скругление, раз мы его делали раньше */
}

/* Адаптив под мобилки (планшеты и телефоны) */
@media (max-width: 768px) {
    figure.left.item-image {
        float: none !important;    /* Отменяем обтекание */
        margin: 0 auto 15px auto !important; /* Центрируем блок */
        max-width: 100%;           /* Фото на весь экран */
    }
}