.wp-block-image {

  text-align: center;
  margin-bottom: var(--global--spacing-vertical-text);
  padding: 0;

  figcaption {
    color: var(--global--color-text-lighten);
    font-size: var(--global--font-size-xs);
    line-height: var(--global--line-height-sm);
    margin-top: 15px;
    text-align: center;
  }

  .alignright {
    margin: 0;
    margin-left: var(--global--spacing-horizontal);
  }

  .alignleft {
    margin: 0;
    margin-right: var(--global--spacing-horizontal);
  }

  &.size-full {

    img {

      width: 100%;
      height: auto;

    }

  }

  a:focus img {
    outline-offset: 2px;
  }

  + .wp-block-image {
    margin-top: var(--global--spacing-horizontal);
  }

  /**
  Utilities classes
   */

  // Image Decoration

  &.is-style-canvi-image-decoration {


    img {
      position: relative;
      z-index: 1;

    }

    figcaption {

      position: absolute;
      bottom: 0;
      left: 15px;
      z-index: 1;
      background: var(--global--color-background-transparent);
      right: 0;
      margin: 0;
      padding: 5px 10px;
      color: var(--global--color-text-base);

    }

    &:not(.alignleft),
    &:not(.alignright) {

      position: relative;
      padding: 15px 0 0 15px;

      &:before {
        background: var(--global--color-secondary);
        content: '';
        display: block;
        right: 15px;
        bottom: 15px;

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }


    }

    .alignleft,
    .alignright {

      position: relative;
      padding: 15px 0 0 15px;

      &:before {
        background: var(--global--color-secondary);
        content: '';
        display: block;
        right: 15px;
        bottom: 15px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
    }

  }

  // Bordered Image

  &.is-style-canvi-image-border {
    img {
      border: var(--global--border-image-style);
    }
  }

  &.is-style-rounded {

    position: relative;

    figure {

      position: relative;

    }

    figcaption {

      @include media(mobile) {
        position: absolute;
        bottom: 20px;
        left: 50%;
        right: -50px;
        max-width: 200px;
        background: var(--global--color-invert);
        line-height: 1.5;
        padding: 3px;
      }

    }

  }
}

// Remove vertical margins from image block wrappers when floated
.entry-content > *[class="wp-block-image"],
.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
  margin-top: 0;
  margin-bottom: 0;

  // Remove top margins from the following element when previous image block is floated
  + * {
    margin-top: 0;
  }
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}


.entry-content {

  > .wp-block-image {

    > .alignleft,
    > .alignright {
      @include media(mobile) {
        max-width: 50%;
      }
      @include media(mobile-only) {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }
}