{% if page.pocket_sized.main_bg %}
{% assign main_bg = '' %}
{% capture main_bg %}{% picture open_graph_1920 pages/{{ page.pocket_sized.main_bg}} %}{% endcapture %}
{% endif %}
<section class="my-5 pocket_sized_main">
<div class="is-container">
   
   <div class="row aos-init aos-animate" data-aos="fade-up" data-aos-duration="700">
      <div class="col-sm-5 col-md-5">
         <div class="pocket_sized_center">
         {% if page.pocket_sized.i_pocket_image %}
         {% assign center_image = page.pocket_sized.i_pocket_image %}
         {% capture center_image %}{% picture open_graph_1000 pages/{{ center_image }} alt="{{ center_image | remove: '.png' | remove: '.jpg' | remove: '.webp' | replace: '-',' ' | replace: '_',' ' }}" %}{% endcapture %}
         <div class="center_main_img">
            {{ center_image }}
         </div>
         {% endif %}
      </div>
      </div>
      <div class="col-sm-5 col-md-7">
<div class="pocket_sized_right">
         <div class="pocket_sized_heading">
            <p class="text-primary">{{page.pocket_sized.t_title}}</p>
            <h3>{{page.pocket_sized.t_subtitle}}</h3>
            <p class="pocket_sized_desc">{{page.pocket_sized.t_description}}</p>
            
         </div>
         <div class="pocket_sized_right_top">
            <h4>{{page.pocket_sized.t_durable_title}}</h4>
            <p>{{page.pocket_sized.t_durable_subtitle}}</p>
            <div class="svg_animate">
               <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="664.531982421875" height="46.19599914550781" viewBox="0 0 664.532 46.196">
                  <style>
                     svg .svg-elem-1{
                     stroke-dashoffset: 1321.067626953125px;
                     stroke-dasharray: 1321.067626953125px;
                     transition: stroke-dashoffset 1.5s ease-out;
                     }
                     svg:hover .svg-elem-1{
                     stroke-dashoffset: 0;
                     }
                     svg .svg-elem-2{
                     stroke-dashoffset: 105.67255756846318px;
                     stroke-dasharray: 105.67255756846318px;
                     fill: transparent;
                     transition: stroke-dashoffset 1.2s ease-out 0.2s, fill 0.6s ease-out 0.8s;
                     }
                     svg:hover .svg-elem-2{
                     stroke-dashoffset: 0;
                     fill: rgb(255,255,255);
                     }
                     svg .svg-elem-3{
                     stroke-dashoffset: 67.97344572538566px;
                     stroke-dasharray: 67.97344572538566px;
                     fill: transparent;
                     transition: stroke-dashoffset 1.2s ease-out 0.4s, fill 0.6s ease-out 1s;
                     }
                     svg:hover .svg-elem-3{
                     stroke-dashoffset: 0;
                     fill: rgb(255,255,255);
                     }
                  </style>
                  <defs>
                     <linearGradient id="pocket-linear-gradient" x1="0.016" x2="1.011" gradientUnits="objectBoundingBox">
                        <stop offset="0" stop-color="#9c9c9c"></stop>
                        <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                     </linearGradient>
                  </defs>
                  <g id="Group_88017" data-name="Group 88017" transform="translate(-912 -4976)">
                     <path id="Path_98119" data-name="Path 98119" d="M3675.532-10236.8H3197.71l-.43-.394-30.526-27.929H3030v-3H3167.92l.43.394,30.526,27.929h476.657Z" transform="translate(-2099 15259)" stroke="url(#pocket-linear-gradient)" fill="none" stroke-width="3" class="svg-elem-1"></path>
                     <g id="Group_87882" data-name="Group 87882" transform="translate(-185 2792)">
                        <circle id="Ellipse_3441" data-name="Ellipse 3441" cx="16.5" cy="16.5" r="16.5" transform="translate(1097 2184)" fill="#fff" opacity="0.2" class="svg-elem-2"></circle>
                        <circle id="Ellipse_3440" data-name="Ellipse 3440" cx="10.5" cy="10.5" r="10.5" transform="translate(1103 2190)" fill="#fff" class="svg-elem-3"></circle>
                     </g>
                  </g>
               </svg>
            </div>
            <ul>
               {% for item in page.pocket_sized.durable_items %}
               <li>
                  {% if item.i_icon %}
                  {% assign main_image = item.i_icon %}
                  {% capture main_image %}{% picture open_graph_1000 pages/{{ main_image }} alt="alt="{{ item.i_icon | remove: '.png' | remove: '.jpg' | remove: '.webp' | replace: '-',' ' | replace: '_',' ' }}" %}{% endcapture %}
                  <span>{{ main_image }}</span>
                  {% endif %}
                  <p>{{item.t_title}}</p>
               </li>
               {% endfor %}
            </ul>
            {% if page.pocket_sized.t_button %}
            <div class="col-12 mt-4">
            <a class="text-primary" href="{{ site.url }}/{{ page.pocket_sized.p_link}}">{{ page.pocket_sized.t_button}} 
               <svg xmlns="http://www.w3.org/2000/svg" width="18.985" height="18.989" viewBox="0 0 18.985 18.989">
                  <path id="Vector" d="M22.381,16.2a1.366,1.366,0,0,1-1.356-1.356V9.38L7.063,23.341a1.354,1.354,0,0,1-1.917,0,1.364,1.364,0,0,1,0-1.917L19.108,7.463H13.646a1.356,1.356,0,1,1,0-2.713h8.735a1.366,1.366,0,0,1,1.356,1.356v8.735A1.366,1.366,0,0,1,22.381,16.2Z" transform="translate(-4.752 -4.75)" fill="#92278f"/>
               </svg>
            </a>
            </div>
            {% endif %}
         </div>
         
      </div>
      </div>
      
   </div>
</div>
</section>