<section class="sub-intro special-test" data-aos="fade">
	<div class="container">
		<article>
			<h2>{{ entry.title }}</h2>
		</article>
	</div>
</section>

<section class="gallery">
	<div class="container">
		<article>
			<div class="filters">
				<div class="ui-group">
					<h3>Stain</h3>
					<div class="button-group js-radio-button-group">
						<button class="button" data-filter=".light">Light</button>
						<button class="button" data-filter=".medium">Medium</button>
						<button class="button" data-filter=".dark">Dark</button>
					</div>
				</div>
				<div class="ui-group">
					<h3>Style</h3>
					<div class="button-group js-radio-button-group">
						<button class="button" data-filter=".wide">Wide</button>
						<button class="button" data-filter=".narrow">Narrow</button>
						<button class="button" data-filter=".borders">Borders</button>
						<button class="button" data-filter=".patterns">Pattern Floor</button>
						<button class="button" data-filter=".inlays">Inlays</button>
						<button class="button" data-filter=".stairs">Stairs</button>
					</div>
				</div>
			</div>
			{% set images = block.images.all() %}

			<div class="grid">
				{% for image in images %}
				{% set imageField = image.fullSizeImage.one() %}
				{% set optimizedImage = imageField.optimizedImageSrcset %}
				{% set tags = image.styleTags %}
				<a class="gallery-item {{ image.stain }} {{ tags|join(' ') }}" data-lity href="{{ optimizedImage.src() }}?.jpg"
					data-srcset="{{ optimizedImage.srcset() }}">
					<img src="{{ optimizedImage.src() }}" srcset="{{ optimizedImage.srcset() }}" sizes="100vw"
						width="{{ optimizedImage.maxSrcsetWidth() }}" height="auto" alt="{{ imageField.altText }}" />
				</a>
				{% endfor %}
			</div>
		</article>
	</div>
</section>