cssOMS/image.scss

img {
    &.frame-1 {
        padding: 1rem;
        background: var(--box-bg);
        border: 1px solid var(--bborder);
        box-sizing: border-box;
        width: 100%;
    }

    &.frame-2 {
        border: 1px solid var(--bborder);
        background: var(--box-bg);
        box-sizing: border-box;
        width: 100%;
    }

    &.rounded {
        border-radius: 50%;
        background: var(--box-bg);
    }

    &.bordered {
        border: 1px solid var(--bborder);;
    }
}

.img-comp {
    margin-left: 3rem;
    position: relative;
    display: inline-block;
    line-height: 0;
    overflow: auto;

    img {
        user-select: none;
    }

    > div {
        position: absolute;
        width: 50%;
        max-width: 100%;
        overflow: hidden;
        resize: horizontal;
        border-right: 1px solid #000;

        &:before {
            content: '';
            display: block;
            width: 13px;
            height: 13px;
            overflow: hidden;
            position: absolute;
            resize: horizontal;
            right: 0;
            bottom: 0;
            background-clip: content-box;
            background: linear-gradient(-45deg, red 50%, transparent 0);
        }
    }
}

.gallery {
    max-width: 80%;
    margin: 0 auto;
    position: relative;

    input + .enlarged {
        display: none;
    }

    input:checked + .enlarged {
        display: block;
    }

    .enlarged {
        position: absolute;
        top: 0;
        left: 0;

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    }

    input {
        display: none;

        &+img {
            display: none;
        }

        &:checked+img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }
    }

    .thumbs img {
        width: 100px;
        height: 100px;
        margin: .3rem;
        border: 1px solid var(--bborder);
    }

    label {
        cursor: pointer;
    }
}

.map-small .map, .olMapViewport {
    width: 100%;
    height: 100%;
    min-height: 250px;
    position: relative;

    .olControlAttribution {
        position: absolute;
        bottom: 0;
        right: 0;
        background: var(--box-bg);
        padding: 2px;
        font-size: .8rem;
    }

    .olButton {
        color: #fff;
    }
}