.about-info-blocks {
    margin: 60px auto;
    max-width: 1450px;
    border-radius: 30px;
}




/* -------------------------------------------------
   ОБЩИЕ ПЕРЕМЕННЫЕ (нужно один раз в проекте)
--------------------------------------------------*/

:root {
    --levano-blue: #1E3A8A;
    --levano-gray: #333;
    --levano-light-bg: #f9f9f9;
    --levano-box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

/* -------------------------------------------------
   1. БАЗОВЫЕ СБОРНЫЕ КЛАССЫ (text / image / content)
--------------------------------------------------*/

/* TEXT h2 */
.main-info-block__text h2,
.extra-info-block__text h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--levano-blue);
    margin-bottom: 20px;
}

/* TEXT description */
.main-info-block__text .description,
.extra-info-block__text .description {
    font-size: 22px;
    color: var(--levano-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* FEATURES LIST */
.main-info-block__text .features-list,
.extra-info-block__text .features-list {
    list-style: none;
    padding: 0;
}

.main-info-block__text .features-list li,
.extra-info-block__text .features-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: var(--levano-blue);
    font-weight: 500;
}
.main-info-block__text .features-list li::before,
.extra-info-block__text .features-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--levano-blue);
    font-size: 16px;
}

/* Оформление чётных / нечётных */
.main-info-block--odd,
.extra-info-block--odd {
    background: #c3c4c742;
}

/* Спрятать caption/description у картинок, если не нужны */
.image-caption,
.image-description {
    display: none;
}

/* FLEX-обёртка CONTENT */
.main-info-block__content,
.extra-info-block__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* TEXT & IMAGE половинки */
.main-info-block__text,
.extra-info-block__text,
.main-info-block__image,
.extra-info-block__image {
    flex: 1 1 48%;
}

/* IMAGE div + картинка */
.main-info-block__image,
.extra-info-block__image {
    max-width: 48%;
}
.main-info-block__image img,
.extra-info-block__image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.info-block__description {
    display: none;
}

/* -------------------------------------------------
   2. СЕКЦИЯ (section-wrapper)
--------------------------------------------------*/
.info-blocks {
    margin: 60px auto;
    max-width: 1450px;
}

/* Блок как карточка */
.main-info-block,
.extra-info-block {
    padding: 30px;
    border-radius: 20px;
    margin: 50px 0;
    transition: transform .3s ease;
    background: #fcd34d;
}

/* -------------------------------------------------
   3. МОДИФИКАТОРЫ СТИЛЕЙ
--------------------------------------------------*/
.main-info-block--style-alt,
.extra-info-block--style-alt {
    background: #f4faff;
}

.main-info-block--style-dark,
.extra-info-block--style-dark {
    background: #1a1a1a;
    color: #fff;
}
.main-info-block--style-dark h2,
.extra-info-block--style-dark h2 {
    color: #fff;
}
.main-info-block--style-dark .description,
.main-info-block--style-dark .features-list,
.extra-info-block--style-dark .description,
.extra-info-block--style-dark .features-list {
    color: #ddd;
}

/* -------------------------------------------------
   4. АДАПТИВНОСТЬ
--------------------------------------------------*/
/* две колонки -> одна */
@media screen and (max-width: 768px) {
    .main-info-block__content,
    .extra-info-block__content {
        flex-direction: column;
        align-items: stretch;
    }
    .main-info-block__text,
    .extra-info-block__text,
    .main-info-block__image,
    .extra-info-block__image {
        flex: 1 1 100%;
        max-width: 100% !important;
    }
    /* переворачиваем odd-блоки, чтобы картинка была после текста */
    .main-info-block--odd .main-info-block__content,
    .extra-info-block--odd .extra-info-block__content {
        flex-direction: column-reverse;
    }
}

/* мелкие экраны */
@media (max-width: 600px) {
    .main-info-block__content,
    .extra-info-block__content {
        padding: 20px;
        gap: 30px;
    }
    .main-info-block__text h2,
    .extra-info-block__text h2 {
        font-size: 24px;
    }
    .features-list li {
        font-size: 14px;
    }
}