{% load wagtailcore_tags wagtailimages_tags static txtutils_tags %}

  <!-- Section: Landing Card Type 2 -->
  <section class="mb-10 text-center text-md-start {{self.settings.custom_css_class}}" {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
    {% if page.cover_image %}
    {% image page.cover_image width-1920 as card_img %}
    {% assign card_img.url as img_url %}
    {% else %}
        {% captureas img_url %}{% static 'cjkcms/images/patterns/pattern2.jpg' %}{% endcaptureas %}
    {% endif %}

    <!-- Background image -->
    <div
        class="p-5 bg-image"
        style="
                background-image: url('{{ img_url }}');
                background-size: cover;
                height: 200px;
                z-index: 0;
                "
    ></div>
    <!-- Background image -->

    {% if self.image %}
    {% image self.image fill-300x300 as card_img %}
    {% assign card_img.url as img_url %}
    {% else %}
        {% captureas img_url %}{% static 'cjkcms/images/patterns/pattern2.jpg' %}{% endcaptureas %}
    {% endif %}
    <div>
      <div class="container mx-auto">
        <div class="row d-flex justify-content-center align-items-center mb-4 mb-md-0 pt-4" style="margin-top: -110px; background: none;">
          <div class="col-4 col-lg-3 col-xl-2" style="z-index:1;">
            <img
                 src="{{ img_url }}"
                 class="rounded-circle float-none float-md-start me-4 mb-3"
                 alt=""
                 style="
                        width: 168px;
                        border: 4px solid hsl(0, 0%, 98%);
                        "
                 />
          </div>
          <div class="col-8 col-lg-9 col-xl-10 text-center text-md-start">
            {% if self.title %}
            <h1 class="fw-bold" style="color:#FF7600;">
            {{self.title}}
            </h1>
            {% endif %}
            {% if self.subtitle %}
            <h2 class="lh-1 ls-tight fw-900 text-primary mb-4">
              {{self.subtitle}}
            </h2>
            {% endif %}
          </div>
        </div>
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col-12" style="z-index:1">
            <div class="fs-5">
              {{self.description | richtext}}
            </div>
            {% if self.links %}
            <div class="buttons">
                {% for button in self.links %}
                {% include_block button %}
                {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>


          <!--div class="col-lg-6 col-md-4 mb-4 mb-md-0 text-center text-lg-end" -->
      </div>
    </div>
  </section>

  <!-- End Section: Landing Card Type 2 -->
