<section class="journeys-video">
    <div class="container-fluid">
        <div class="row justify-center row-reverse">
            <div class="col-md-7 col-xl-5 col-xxl-4">
                <div class="journeys-video__description">
                    <h3 class="h4">{{ fields.main_title }}</h3>
                    <p>{{ fields.text }}</p>
                    <div class="journeys__video-button">
                        {% if fields.button_link and fields.button_text %}
                            <a href="{{ fields.button_link }}" class="btn btn--primary">
                                {{ fields.button_text }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-5 col-xl-5 col-xxl-4">
                {% if fields.thumbnail_image %}
                    <div class="journeys-video__video">
                        <img class="journeys-video__video__thumbnail" src="{{ fields.thumbnail_image.url }}" alt="{{ fields.thumbnail_image.alt }}" {{ fields.video_link ? 'data-play-video data-video-code="' ~ fields.video_link ~ '"' : '' }}  />
                        {% if fields.video_link %}
                            <img class="journeys-video__video__play-btn" src="{{ function('get_frontend_static_asset', 'assets/images/play_button.svg') }}" alt="{{ t('Video play button') }}" data-play-video data-video-code="{{ fields.video_link }}" />
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>


{# Video pop-up #}


<div class="video-modal" id="video-modal">
	<span class="close-btn">
			<img src="{{ function('get_frontend_static_asset', 'assets/icons/close-button.svg') }}" alt="{{ t('close') }}"/>
	</span>
	<div class="modal"></div>
</div>