{% load static %}

<section id="about" class="about">
  <div class="container" data-aos="fade-up">

    <div class="section-title">
      <h2>About Us</h2>
      {% autoescape off %}
      <p>{{ about_p }}</p>
      {% endautoescape %}
    </div>

    <div class="row">
      <div class="col-lg-6" data-aos="fade-right">
        <img src="{% static 'img/'|add:template_name|add:'/'|add:about_image %}" class="img-fluid" alt="">
      </div>
      <div class="col-lg-6 pt-4 pt-lg-0 content" data-aos="fade-left">
        <h3>{{ about.h3 }}</h3>
        {% autoescape off %}
        <p class="fst-italic">
          {{ about.p_head }}
        </p>
        <ul>
          {% for item in about.li %}
          <li><i class="bi bi-check-circle"></i> {{ item.title }}</li>
          {% endfor %}
        </ul>
        <p>
          {{ about.p_tail }}
        </p>
        {% endautoescape %}
      </div>
    </div>

  </div>
</section>