Sights Sounds Item

{% set uniqid = uniqid("sights-sounds-item-media") %}
{% set audio_only = item.video and item.video.audio_only %}

<div class="sights_sounds_item {% if audio_only %}is_audio_only{% endif %}">
	<div class="sights_sounds_item_grid">
		<div class="sights_sounds_item_grid_item is_left">
			<div class="sights_sounds_item_content">
				<div class="sights_sounds_item_label">{{ items_label }}</div>
				<h2 class="sights_sounds_item_title">
					{{ item.title }}
				</h2>
				<div class="sights_sounds_item_desc">
					<div class="typography">
						<p>{{ item.description }}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="sights_sounds_item_grid_item is_right">
			<figure class="sights_sounds_item_figure">
				{% if item.image %}
					{% include '@partial-picture' with {
						class: 'sights_sounds_item',
						image: item.image,
						alt: '',
						loading: 'lazy',
						default: img.wide.med,
						sources: {
							'980px': img.portraitFull.lrg
						}
					} %}
				{% endif %}

				{% if item.video %}
					{% include "@partial-lazy-video" with {
						class: "sights_sounds_item",
						id: item.video.id,
						type: item.video.type,
						display: "background",
						autoplay: false,
						title: item.video.title,
						load_strategy: "none"
					} %}
				{% endif %}

				{% if item.video %}
					{% if item.video.audio_only %}
						<div class="sights_sounds_item_audio_btn_group">
							<button type="button" class="sights_sounds_item_audio_btn" data-js="btn-pause" aria-label="Pause Audio">
								<span class="sights_sounds_item_audio_btn_icon">
									{{ icon("carousel_mute" )}}
								</span>

								<span class="sights_sounds_item_audio_btn_label">
									{{ item.video.label }}
								</span>
							</button>

							<button type="button" class="sights_sounds_item_audio_btn" data-js="btn-play" aria-label="Play Audio">
								<span class="sights_sounds_item_audio_btn_icon">
									{{ icon("carousel_unmute" )}}
								</span>

								<span class="sights_sounds_item_audio_btn_label">
									{{ item.video.label }}
								</span>
							</button>
						</div>
					{% else %}
						<div class="sights_sounds_item_btn_group">
							<button class="sights_sounds_item_btn" data-js="btn-pause" aria-label="Pause Video">
								{{ icon("carousel_pause") }}
							</button>

							<button class="sights_sounds_item_btn is_active" data-js="btn-play" aria-label="Play Video">
								{{ icon("carousel_play") }}
							</button>
						</div>
					{% endif %}
				{% endif %}
			</figure>
		</div>
	</div>
</div>