<bp:template>
  <b:comment>### Featured image ###</b:comment>
  <b:with value='800' var='size'>
    <b:with value='"16:9"' var='ratio'>
      <b:if cond='data:post.featuredImage'>
        <div class='post-default-featured-image mb-3 mb-0-last-child'>
          <b:if cond='data:post.featuredImage.isYoutube'>
            <a expr:href='data:post.link ?: data:post.url'>
              <b:tag name='img'>
                <!-- src --><b:attr expr:value='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, data:size, data:ratio) : data:post.featuredImage.youtubeMaxResDefaultUrl' name='src'/>
                <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
              </b:tag>
            </a>
          <b:else/>
            <a expr:href='data:post.link ?: data:post.url'>
              <b:tag name='img'>
                <!-- src --><b:attr expr:value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, data:size, data:ratio) : data:post.featuredImage' name='src'/>
                <!-- alt --><b:attr expr:value='data:post.title ? data:post.title : data:messages.image' name='alt'/>
              </b:tag>
            </a>
          </b:if>
        </div><!-- /.post-default-featured-image -->
      </b:if>
    </b:with>
  </b:with>
</bp:template>

<bp:sass>
.post-default-featured-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>
