/* ===== Блоки-преимущества товара ===== */

.pf-section {
    display: flex;
    width: 100%;
    min-height: 640px;
    background: #efeff1;
    color: #1a1a1a;
    overflow: hidden;
}

.pf-section--reverse {
    flex-direction: row-reverse;
}

.pf-section--dark {
    background: #111111;
    color: #ffffff;
}

/* Форсим белый цвет заголовка и текста внутри тёмных блоков —
   в проекте h2 и .pf-section__text могут иметь собственный цвет
   через другие селекторы, поэтому наследования мало. */
.pf-section--dark .pf-section__title,
.pf-section--dark .pf-section__text {
    color: #ffffff;
}

.pf-section__media {
    flex: 0 0 50%;
    max-width: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 640px;
}

.pf-section__content {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 90px;
    box-sizing: border-box;
}

/* Когда фото справа (reverse-блок), текст — во второй половине,
   прижимаем содержимое к правому краю. */
.pf-section--reverse .pf-section__content {
    align-items: flex-end;
    text-align: right;
}

.pf-section__title {
    font-family: "Capture", sans-serif;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
    color: inherit;
}

.pf-section__text {
    font-size: 17px;
    line-height: 1.65;
    max-width: 560px;
    color: inherit;
}

@media (max-width: 900px) {
    .pf-section,
    .pf-section--reverse {
        flex-direction: column;
        min-height: 0;
    }

    .pf-section__media {
        flex: 0 0 300px;
        max-width: 100%;
        min-height: 300px;
    }

    .pf-section__content,
    .pf-section--reverse .pf-section__content {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 40px 24px 52px;
        /* на мобильных выключим правое выравнивание — так читабельнее */
        align-items: flex-start;
        text-align: left;
    }

    .pf-section__title {
        font-size: 22px;
    }

    .pf-section__text {
        font-size: 16px;
    }
}