{% extends "base.twig" %}

{% block content %}

<section class="hero-page bg-dark-arrows">
    <div class="container">
        <h1 class="hero-page__main-title text-left text-align-left text-uppercase">{{ drill.title }}</h1>
        <a href="{{ free_drills_page_template }}" class="h2 hero-page__back">Back to free drills</a>
    </div>

</section>
<section class="page-content">
    <div class="container page-content__single">
        <article class="post-narrow">
            <div class="youtube-embed">
                <iframe src="{{ drill.youtube_embed }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <h4 class="text-uppercase text-bold">Description</h4>
            {{ drill.description }}
            <h4 class="text-uppercase text-bold">Key points</h4>
            {{ drill.key_points }}
        </article>
    </div>
</section>

{% endblock %}