.pro-img {
    width: 100%;
    margin: 15px 0;
}

.pro-img img {
    max-width: 100%;
    display: block;
}

/* ratio ONLY when no inline size */
.pro-img[class*="ratio-"] {
    position: relative;
    overflow: hidden;
}

/* ВАЖНО: не ломаем inline width/height */
.pro-img[class*="ratio-"] img:not([style*="width"]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-img.ratio-16-9 { aspect-ratio: 16/9; }
.pro-img.ratio-4-3 { aspect-ratio: 4/3; }
.pro-img.ratio-1-1 { aspect-ratio: 1/1; }

.pro-img {
    display: block;
    margin: 15px 0;
}

/* ОБТЕКАНИЕ ТЕКСТА */
.pro-img.align-left {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 300px;
}

.pro-img.align-right {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 300px;
}

/* ЦЕНТР */
.pro-img.align-center {
    display: block;
    margin: 20px auto;
    text-align: center;
}

.pro-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* очистка потока */
.pro-clear {
    clear: both;
}