/* Фотографии внутри текста новости: единые рамки для любых исходников.
   Горизонтальные снимки режутся в 3:2, вертикальные — в 3:4.
   Несколько снимков подряд встают в ряд одинаковой высоты. */

.nw-photo {
    margin: 32px auto;
    padding: 0;
}

.nw-photo__frame {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #ececec;
}

.nw-photo__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.nw-photo_h .nw-photo__frame {
    aspect-ratio: 3 / 2;
}

.nw-photo_v {
    max-width: 420px;
}

.nw-photo_v .nw-photo__frame {
    aspect-ratio: 3 / 4;
}

.nw-photo__cap {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #6e6e6e;
    text-align: center;
}

/* Ряд из двух-трёх снимков */
.nw-photo-row {
    display: grid;
    gap: 16px;
    margin: 32px 0;
    align-items: start;
}

.nw-photo-row_2 {
    grid-template-columns: repeat(2, 1fr);
}

.nw-photo-row_3 {
    grid-template-columns: repeat(3, 1fr);
}

.nw-photo-row .nw-photo {
    margin: 0;
    max-width: none;
}

/* В ряду высота у всех одна, поэтому пропорции задаёт сам ряд:
   вертикальные — 3:4, горизонтальные — 3:2, вперемешку — квадрат. */
.nw-photo-row_v .nw-photo__frame {
    aspect-ratio: 3 / 4;
}

.nw-photo-row_h .nw-photo__frame {
    aspect-ratio: 3 / 2;
}

.nw-photo-row_m .nw-photo__frame {
    aspect-ratio: 1 / 1;
}

@media screen and (max-width: 770px) {
    .nw-photo {
        margin: 24px auto;
    }

    .nw-photo-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 24px 0;
    }

    /* На узком экране ряд разворачивается в столбец,
       и каждый снимок снова получает свою рамку. */
    .nw-photo-row .nw-photo {
        max-width: 420px;
        margin: 0 auto;
    }

    .nw-photo-row .nw-photo_h .nw-photo__frame {
        aspect-ratio: 3 / 2;
    }

    .nw-photo-row .nw-photo_v .nw-photo__frame {
        aspect-ratio: 3 / 4;
    }
}