<style>
	@media screen and (min-width: 1020px){
		.journeys-hero{
			background-image: url({{ fields.background_image.url }});
		}
	}
</style>

<section class="journeys-hero">
	<div class="container-fluid">
		<div class="row journeys-hero__wrapper-img">
			<div class="col-12 col-lg-10 col-xl-8 col-l-6 offset-xl-1 journeys-hero__big-screen-wrap">
				<div class="journeys-hero__title-wrap">
					<h3 class="journeys-hero__subtitle-upper">{{ fields.upper_subtitle }}</h3>
					<h1 class="journeys-hero__title">{{ fields.main_title }}</h1>
					<h3 class="journeys-hero__subtitle-lower">{{ fields.lower_subtitle }}</h3>
				</div>

				<div>
					<div class="journeys-hero__mobile-img">
						<img src="{{ fields.mobile_background_image ? fields.mobile_background_image.url : fields.background_image.url }}" alt="{{ fields.mobile_background_image ? fields.mobile_background_image.alt : fields.background_image.alt }}" />
					</div>
					<img class="journeys-hero__line" src="{{ function('get_frontend_static_asset', 'assets/images/line.svg') }}" alt="{{ t('line') }}">
					<div class="journeys-hero__text">{{ fields.text }}</div>
				</div>

				{% if fields.has_particles_effect %}
					<div class="journeys-hero__effect">
						<img src="{{ function('get_frontend_static_asset', 'assets/images/particles-effect.png') }}" alt="{{ t('effect') }}">
					</div>
				{% endif %}

				{% include "templates/interactive-icons/pulsating-delta-arrow.twig" with { class: 'journeys-hero__arrow js-arrow-link' } %}
			</div>
		</div>
	</div>
</section>