<section class="about__skills {{content.AboutSkillsSecBackground}}" data-brand-header data-counter-animations data-stagger="0.4"> <div class="grid-container"> <div class="about__title title title__center"> <div class="out" data-css-animation="out-in" style="--delay: .3s"> <div class="in"> <h3>{{ content.AboutSkillsSecTitle }}</h3> </div> </div> </div> <div class="about__text" data-css-animation="fade-in-up" style="--delay: .4s"> {{ content.AboutSkillsSecContent | raw }} </div> <div class="about__counters"> {% for item in content.blocks %} <div class="about__counter"> <svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg" data-circle-animation> <circle cx="130" cy="130" r="125" stroke="#f7f7f7" stroke-width="10"/> </svg> <div class="about__counter-content"> <p> <span data-counter-animation data-from="0" data-to="{{ item.AboutSkillsSecBlockTitle }}"></span> </p> <p style="font-weight: bold">{{ item.AboutSkillsSecBlockContent|raw }}</p> </div> </div> {% endfor %} </div> </div> </section>