{% if categoryName == 'przedszkola' or categoryName == 'szkoly' %}
	{% set bgClass="bg-white" %}
	{% set withBg = true %}
{% else %}
	{% set bgClass="bg-dark-blue" %}
	{% set withBg = false %}
{% endif %}

<section class="{{ bgClass }}-top">
	<div class="inner {{ bgClass }}">
		<div class="container py-5">
			<div class="row">
				<div class="col-12">
					<h3>{{ box.header }}</h3>
					{% if box.img %}
						
						{% if box.scroll %}
							<div class="position-relative w-100">
								<div class="position-relative scroll-container" style="overflow-x: scroll;">	
									<div><img alt="" src="{{ sonata_path(box.img, 'reference') }}" class="mb-5" /></div>
								</div>
							</div>
						{% else %}
							<img alt="" src="{{ sonata_path(box.img, 'reference') }}" class="w-100 d-none d-md-block" />
						{% endif %}

					{% endif %}
					{% if box.imgMobile %}
						<img alt="" src="{{ sonata_path(box.imgMobile, 'reference') }}" class="w-100 d-block d-md-none" />
					{% endif %}
					<div>{{ box.content|raw }}</div>		
				</div>
			</div>
		</div>
	</div>
	<div class="bg-bottom"></div>
</section>