/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'article-card.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 27:0 Unexpected "{"
Line 27:1 Expected identifier but found "%"
Line 28:0 Unexpected "<"
Line 31:5 Expected identifier but found "%"
Line 32:6 Unexpected "<"
... and 88 more hidden warnings

**/
{{ 'article-card.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign read_more = 'blogs.article.read_more' | t
  if enable_button_underlined_white
    assign button_style = 'underlined-white'
  else
    assign button_style = 'underlined'
  endif
-%}

{%- if article and article != empty -%}
<div class="article-card-wrapper">
  <div class="article-card">

    {%- if show_image and article.image -%}
      <div class="article-card__image-wrapper">
        <div class="article-card__image overflow-hidden relative">
          <a href="{{ article.url }}" aria-label="{{ article.title | escape }}">
            {%- render 'responsive-image',
              image: article.image,
              sizes: sizes,
              image_aspect_ratio: media_aspect_ratio,
              alt: article.image.alt | escape
            -%}
          </a>
          {%- if show_category and article.tags.size > 0 -%}
            <span class="badge badge-article top-4 left-4 absolute">
              {{ article.tags | first }}
            </span>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}

    <div class="article__content pt-8 flex flex-col">
      <div class="article__information">
        <div class="article-card__info light text-size-small pb-6">
          {%- if show_date -%}
            <span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
          {%- endif -%}
          {%- if show_author -%}
            <span>{{ article.author }}</span>
          {%- endif -%}
        </div>

        <h3 class="article-card__heading h4 pb-6">
          <a href="{{ article.url }}" class="full-unstyled-link">
            {{ article.title | escape }}
          </a>
        </h3>

        {%- if show_excerpt -%}
          {%- assign excerpt_text = article.excerpt | strip_html | truncatewords: 20 %}
          {%- if excerpt_text == blank %}
            {%- assign excerpt_text = article.content | strip_html | truncatewords: 20 %}
          {%- endif -%}
          <p class="article-card__excerpt pb-8">{{ excerpt_text }}</p>
        {%- endif -%}

        {%- if show_read_more -%}
          {%- render 'button',
            button_style: button_style,
            button_text: read_more,
            button_url: article.url,
            button_type: 'link'
          -%}
        {%- endif -%}
      </div>
    </div>

  </div>
</div>

{%- else -%}
<div class="article-card-wrapper">
  <div class="article-card">

    {%- if show_image -%}
      <div class="article-card__image-wrapper">
        <div class="article-card__image overflow-hidden relative">
          {% render 'placeholder-image', image_placeholder: 'image', image_aspect_ratio: media_aspect_ratio %}
        </div>
      </div>
    {%- endif -%}

    <div class="article__content pt-8">
      <div class="article__information">
        <div class="article-card__info light text-size-small pb-6">
          {%- if show_date -%}
            <span class="circle-divider">{{ "today" | time_tag: format: 'date' }}</span>
          {%- endif -%}
          {%- if show_author -%}
            <span>{{ 'sections.featured_blog.onboarding_author' | t }}</span>
          {%- endif -%}
        </div>

        <h3 class="article-card__heading h4 pb-6">
          <a role="link" aria-disabled="true" class="full-unstyled-link">
            {{ 'sections.featured_blog.onboarding_title' | t }}
          </a>
        </h3>

        {%- if show_excerpt -%}
          <p class="article-card__excerpt pb-8">
            {{ 'sections.featured_blog.onboarding_content' | t }}
          </p>
        {%- endif -%}

        {%- if show_read_more -%}
          {%- render 'button',
            button_style: button_style,
            button_text: read_more,
            button_type: 'no-link'
          -%}
        {%- endif -%}
      </div>
    </div>

  </div>
</div>
{%- endif -%}