.image-with-margin {
    width: 100%;
    margin: 0 0 18px;
}
.image-without-margin {
    width: calc(100% + 40px);
    margin: 0 -20px 18px;
}
.image-wrap-text-left {
    float: left;
    margin: 3px 10px 3px 0px;
}
.image-wrap-text-right {
    float: right;
    margin: 3px 0px 3px 10px;
}
@media (max-width: 700px) {
    .image-wrap-text-left, 
    .image-wrap-text-left.image-30,
    .image-wrap-text-left.image-40,
    .image-wrap-text-left.image-50,
    .image-wrap-text-left.image-60 {
        width: 100%;
        margin: 0 0 18px;
    }
    .image-wrap-text-right, 
    .image-wrap-text-right.image-30,
    .image-wrap-text-right.image-40,
    .image-wrap-text-right.image-50,
    .image-wrap-text-right.image-60 {
        width: 100%;
        margin: 0 0 18px;
    }
}
.image-30 {
    width: 30%;
}
.image-40 {
    width: 40%;
}
.image-50 {
    width: 50%;
}
.image-60 {
    width: 60%;
}
.with-caption {
    margin-bottom: 0;
}