:root {
  --ck-image-style-spacing: 1.5em; }

.ck-content .image-style-side,
.ck-content .image-style-align-left,
.ck-content .image-style-align-center,
.ck-content .image-style-align-right {
  max-width: 50%; }

.ck-content .image-style-side {
  float: right;
  margin-left: var(--ck-image-style-spacing); }

.ck-content .image-style-align-left {
  float: left;
  margin-right: var(--ck-image-style-spacing); }

.ck-content .image-style-align-center {
  margin-left: auto;
  margin-right: auto; }

.ck-content .image-style-align-right {
  float: right;
  margin-left: var(--ck-image-style-spacing); }

.ck-content .image > figcaption {
  /*** Caption ***/
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: #333333;
  background-color: #f7f7f7;
  padding: .6em;
  font-size: .75em;
  outline-offset: -1px; }

.ck-content .image.image_resized {
  /*** Resize ***/
  max-width: 100%;
  /*
		The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
		See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
		Fortunately, since we control the width, there is no risk that the image will look bad.
		*/
  display: block;
  box-sizing: border-box; }
  .ck-content .image.image_resized img {
    /* For resized images it is the `<figure>` element that determines the image width. */
    width: 100%; }
  .ck-content .image.image_resized > figcaption {
    /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
    display: block; }