:root {
    /**
    Если высота контейнера не зависит от родительской области
    нужно указать эти параметры в пискелях (обязательно)
     */
    --o-img-height-desktop: 100%;
    --o-img-height-tablet: var(--o-img-height-desktop);
    --o-img-height-mobile: var(--o-img-height-tablet);
    /*
    Если высота контейнера зависит от родительской области
    достаточно указать --o-img-max-height (необязательно)
     */
    --o-img-max-height: 100%;
}

.oimg {
    display: block;
    width: 100%;
    height: 100%;
    align-self: stretch; /*на случай, если внутри flex*/
}

.o-img-wrapper {
    display: none;
    position: relative;
    overflow: hidden;
    max-height: var(--o-img-max-height);
}

.o-img-wrapper.o-img-cover,
.o-img-wrapper.o-img-contain {
    --block_or_flex: block;
}

.o-img-wrapper.o-img-scale,
.o-img-wrapper.o-img-fullsize {
    --block_or_flex: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 1001px) {
    .o-img-wrapper.ifDesktop {
        display: var(--block_or_flex);
        height: var(--o-img-height-desktop);
    }

    .o-img-scale img {
        max-height: var(--o-img-height-desktop);
    }
}

@media screen and (min-width: 601px) and (max-width: 1000px) {
    .o-img-wrapper.ifTablet {
        display: var(--block_or_flex);
        height: var(--o-img-height-tablet);
    }

    .o-img-scale img {
        max-height: var(--o-img-height-tablet);
    }
}

@media screen and (max-width: 600px) {
    .o-img-wrapper.ifMobile {
        display: var(--block_or_flex);
        height: var(--o-img-height-mobile);
    }

    .o-img-scale img {
        max-height: var(--o-img-height-mobile);
    }
}

.o-img-wrapper.o-img-scale {
    height: min(var(--o-img-max-height), 100%);
    text-align: center;
}

img.o-img {
    width: 100%;
    height: 100%;
}

.o-img-contain img {
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
}

.o-img-cover img {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.o-img-scale img {
    object-fit: contain;
}

.o-img-fullsize img {
    object-fit: contain;
    width: auto;
    height: auto;
}

.o-img-scale.left,
.o-img-fullsize.left {
    justify-content: flex-start;
}

.o-img-scale.right,
.o-img-fullsize.right {
    justify-content: flex-end;
}

.o-img-scale.top,
.o-img-fullsize.top {
    align-items: flex-start;
}

.o-img-scale.bottom,
.o-img-fullsize.bottom {
    align-items: flex-end;
}


.oimg .edit-button {
    --button-size: 25px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    /*right: calc(var(--button-size) * 2 + 1px);*/
    z-index: 1;
    font-size: 12pt;
    color: #333;
    text-shadow: none;
}

*:hover > .oimg .edit-button,
.oimg:hover .edit-button {
    display: block;
}

.oimg .edit-button .fa {
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgb(255, 220, 9);
    box-sizing: border-box;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
}

.oimg .edit-button .helpercall:hover {
    background-color: rgb(255, 220, 9);
}