Handles responsive image alignment for octobercms richeditor generated classes

oc-images.css

/**
 * Mobile first.
 * By default, make images and videos display
 * block and centrally align them.
 */
img {
    &.fr-dib,
    &.fr-dib.fil,
    &.fr-dib.fir,
    &.fr-dii,
    &.fr-dii.fil,
    &.fr-dii.fir {
        display: block;
        margin: 0 auto 16px;
    }
}

.fr-video {
    &.fr-dvb,
    &.fr-dvi {
        display: block;
        margin: 0 auto 16px;
        text-align: center;
    }
}

/**
 * Add media query rule here.
 * I used zurb foundation that generates them for you
 * when using the function below
 */
@include breakpoint(medium) {
    img {
        &.fr-dib {
            // break text
            margin: 0 auto 16px; // align break text images centrally by default

            &.fr-fil {
                margin: 0 auto 16px 0; // align-left
            }

            &.fr-fir {
                margin: 0 0 16px auto; // align-right
            }
        }

        /**
         * For me I want images to still be display
         * block on tablet / medium sized screens
         */
        &.fr-dii {
            // display inline
            display: block;
            margin: 16px auto;

            &.fr-fil {
                float: left;
                margin: 8px 16px 16px 0;
            }

            &.fr-fir {
                float: right;
                margin: 8px 0 16px 16px;
            }
        }
    }
}

@include breakpoint(large) {
    img {
        .fr-dii {
            display: inline-block;
            margin: 0 8px;
        }
    }

    .fr-video {
        &.fr-dvb,
        &.fr-dvi {
            &.fr-fvl {
                text-align: left;
            }

            &.fr-fvr {
                text-align: right;
            }
        }
    }
}