{{:~registerFont(titleFontFamily)}}
{{:~registerFont(titleFontFamilyH2)}}
{{:~registerFont(titleFontFamilyH3)}}
{{:~registerFont(titleFontFamilyH4)}}
{{:~registerFont(textFontFamily)}}

<style>
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h1 {
    {{wscCSSStyleFontFamily: titleFontFamily}}
    {{wscCSSStyle: 'font-size' titleFontSize}}
    {{wscCSSStyle: 'line-height' titleLineHeight}}
    {{wscCSSStyle: 'letter-spacing' titleLetterSpacing}}
    {{wscCSSStyle: 'font-weight' titleFontWeight}}
    {{wscCSSStyleColor: titleColorTypeH1 titleCustomColorH1}}
    {{wscCSSStyleTextShadow: titleShadowStyle titleHShadow titleVShadow titleBlurRadius titleShadowColor}}
  }
</style>

<style>
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h2 {
    {{wscCSSStyleFontFamily: titleFontFamilyH2}}
    {{wscCSSStyle: 'font-size' titleFontSizeH2}}
    {{wscCSSStyle: 'line-height' titleLineHeightH2}}
    {{wscCSSStyle: 'letter-spacing' titleLetterSpacingH2}}
    {{wscCSSStyle: 'font-weight' titleFontWeightH2}}
    {{wscCSSStyleColor: titleColorTypeH2 titleCustomColorH2}}
    {{wscCSSStyleTextShadow: titleShadowStyleH2 titleHShadowH2 titleVShadowH2 titleBlurRadiusH2 titleShadowColorH2}}
  }
</style>

<style>
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h3 {
    {{wscCSSStyleFontFamily: titleFontFamilyH3}}
    {{wscCSSStyle: 'font-size' titleFontSizeH3}}
    {{wscCSSStyle: 'line-height' titleLineHeightH3}}
    {{wscCSSStyle: 'letter-spacing' titleLetterSpacingH3}}
    {{wscCSSStyle: 'font-weight' titleFontWeightH3}}
    {{wscCSSStyleColor: titleColorTypeH3 titleCustomColorH3}}
    {{wscCSSStyleTextShadow: titleShadowStyleH3 titleHShadowH3 titleVShadowH3 titleBlurRadiusH3 titleShadowColorH3}}
  }
</style>

<style>
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h4,
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h5,
  .module-{{:~moduleId}} .mng-item-{{:itemId}} h6 {
    {{wscCSSStyleFontFamily: titleFontFamilyH4}}
    {{wscCSSStyle: 'font-size' titleFontSizeH4}}
    {{wscCSSStyle: 'line-height' titleLineHeightH4}}
    {{wscCSSStyle: 'letter-spacing' titleLetterSpacingH4}}
    {{wscCSSStyle: 'font-weight' titleFontWeightH4}}
    {{wscCSSStyleColor: titleColorTypeH4 titleCustomColorH4}}
    {{wscCSSStyleTextShadow: titleShadowStyleH4 titleHShadowH4 titleVShadowH4 titleBlurRadiusH4 titleShadowColorH4}}
  }
</style>

<style>
    /* Titles letter-spacing inside content editor */
    .module-{{:~moduleId}} .mng-item-{{:itemId}} .txtimg-description,
    .module-{{:~moduleId}} .mng-item-{{:itemId}} .txtimg-description p {
      {{wscCSSStyleFontFamily: textFontFamily}}
      {{wscCSSStyle: 'font-size' textFontSize}}
      {{wscCSSStyle: 'line-height' textLineHeight}}
      {{wscCSSStyle: 'letter-spacing' textLetterSpacing}}
      {{wscCSSStyle: 'font-weight' textFontWeight}}
      {{wscCSSStyleColor: textColorType textCustomColor}}
      {{wscCSSStyleTextShadow: textShadowStyle textHShadow textVShadow textBlurRadius textShadowColor}}
    }
</style>

<div class="row">
  {{if imagePlacement == 'image-left' }}
  <div class="col-md-{{:contentProportion}} {{:imageAlign}}">
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
  </div>
  <div class="col-md-{{:(12 - contentProportion)}} {{:contentAlign}} mng-item-{{:itemId}}">
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  {{else imagePlacement == 'image-right' }}
  <div class="col-md-{{:(12 - contentProportion)}} {{:contentAlign}} mng-item-{{:itemId}}">
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  <div class="col-md-{{:contentProportion}} {{:imageAlign}}">
      <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
          <img style="margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
      </a>
  </div>
  {{else imagePlacement == 'image-top' }}
  <div class="col-md-12 {{:contentAlign}} mng-item-{{:itemId}}">
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  {{else imagePlacement == 'image-bottom' }}
  <div class="col-md-12 {{:contentAlign}} mng-item-{{:itemId}}">
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  {{else imagePlacement == 'image-down' }}
  <div class="col-md-12 {{:contentAlign}} mng-item-{{:itemId}}">
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
  </div>
  {{else imagePlacement == 'image-float-left' }}
  <div class="col-md-12 {{:contentAlign}} mng-item-{{:itemId}}">
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="float: left; margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
    <div class="txtimg-title">
      <{{:headingLevel}}>
        {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  {{else imagePlacement == 'image-float-right' }}
  <div class="col-md-12 {{:contentAlign}} mng-item-{{:itemId}}">
    <a {{if url}} href="{{:url}}" {{/if}} {{if urlType == "new_window_link_type"}} target='_blank' {{/if}}>
        <img style="float: right; margin: {{:imageMarginTop}} {{:imageMarginRight}} {{:imageMarginBottom}} {{:imageMarginLeft}}; border-radius: {{:imageRadius}}" alt="" src="{{:~utils.getModuleImageUrl(image.resized)}}" />
    </a>
    <div class="txtimg-title">
      <{{:headingLevel}}>
          {{:title}}
      </{{:headingLevel}}>
    </div>
    <div class="txtimg-description {{:textColorType}}">
        {{:description}}
    </div>
  </div>
  {{/if}}
</div>

{{if ~isEditMode }}
  {{include tmpl="wscMCMSlideActionPanel" ~noDrag=true /}}
{{/if}}