<bp:template>
  <figure class='wg-image d-block m-0'>
    <b:if cond='data:sourceUrl'>
      <div class='wg-image-image'>
        <b:tag cond='data:link' expr:href='data:link' name='a'>
          <img expr:alt='data:messages.image' expr:src='data:sourceUrl'/>
        </b:tag>
      </div>
    </b:if>
    <b:if cond='data:caption'>
      <figcaption class='wg-image-caption text-muted mt-2 mb-0'>
        <data:caption/>
      </figcaption>
    </b:if>
  </figure>
</bp:template>

<bp:sass>
//
// Image
//

.wg-image-image {
  position: relative;
  padding-top: 56.25%;

  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    @include border-radius($border-radius);
  }
}
</bp:sass>
