<section class="clinic-services-and-present-section">
    <div class="clinic-services-and-present-section__main">
        <div class="clinic-services-and-present-section__video-preview" style="background-image: url('/images/3feada0506554c55c215b0e682efda0d5d9f0d64.jpg')">
            <button class="clinic-services-and-present-section__video-btn" data-modal-video-btn="ffg00m1w8xi7">
                <svg><use xlink:href="/sprite.svg#play"></use></svg>
            </button>

            <template data-modal-video="ffg00m1w8xi7">
                <div class="modal-video-overlay">
                    <div class="modal-video">
                        <button class="modal-video__close-btn">
                            <svg><use xlink:href="/sprite.svg#close-modal"></use></svg>
                        </button>

                        <svg class="modal-video__play-btn"><use xlink:href="/sprite.svg#play-modal"></use></svg>
                    </div>
                </div>
            </template>
        </div>

        <ul class="clinic-services-and-present-section__grid">
            {% for item in ["Алкоголизм", "Наркомания", "Игромания", "Депрессии и неврозы", "Психические заболевания", "Психосоматика", "Расстройства пищевого поведения"] %}
                <li class="clinic-services-and-present-section__item">
                    <div class="clinic-services-and-present-section__item__icon">
                        <svg><use xlink:href="/sprite.svg#service-{{ loop.index }}"></use></svg>
                    </div>
                    <span class="clinic-services-and-present-section__item__text">{{ item }}</span>
                </li>
            {% endfor %}
        </ul>
    </div>
</section>