{% extends "base.html" %}

{% load wagtailcore_tags %}

{% block body_class %}template-aboutpage{% endblock %}

{% block content %}

<section class="relative bg-white">
   <div class="container mx-auto p-4">
     <div class="flex flex-col lg:flex-row">
        <div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
          <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
            {{ page.section_one_title|richtext }}
          </div>
          <div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
            {{ page.section_one_text|richtext }}
          </div>
        </div>
       <div class="lg:w-2/5 flex items-center justify-center">
         <div class="md:max-h-sm md:max-w-35 mx-auto">
           {{ page.section_one_img|richtext }}
         </div>
       </div>
     </div>
   </div>
 </section>

 <section class="relative rounded-xl main-color">
   <div class="container mx-auto p-4">
     <div class="text-left mb-8">
     </div>
     <div class="flex flex-col lg:flex-row">
       <div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
        <div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
          {{ page.section_two_title|richtext }}
         </div>
         <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
           {{ page.section_two_text|richtext }}
         </div>
       </div>
       <div class="lg:w-2/5 flex items-center justify-center">
         <div class="md:max-h-sm md:max-w-35 mx-auto">
           {{ page.section_two_img|richtext }}
         </div>
       </div>
     </div>
   </div>
 </section>
 <br />

{% endblock %}