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

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

    &.rounded {
        border-radius: 50%;
        background: #fff;
    }

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

.image-comparison {
    margin-left: 3rem;
    position: relative;
    display: inline-block;
    line-height: 0;

    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;

    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 #ccc;
    }

    label {
        float: left;
        cursor: pointer;
    }
}