Card set menu

<!--
 Add a key event handler that listens for the 'Space' key in order to be consistent with native buttons. 
-->
<script>
$(function(){
    $('.toggle-btn').keypress(function(e) {
        e.preventDefault();
    });
});
</script>

<!--The 'toggle-container' div will only shows when screen > 768px-->
<div class="subtitle-block red-underline cui d-none d-md-block">
	<h2>{{ Title }}</h2>
	<hr>
</div>

<div class="cui toggle-container">
	<div class="content-body">
		<div class="row-equal-height-cards ">
			<div class="col-md-6">
				{{ Card }}	
			</div>
			<div class="col-md-6">
				{{ Card }}		
			</div>
			<div class="col-md-6">
				{{ Card }}
			</div>
		</div>
	</div>
	<div class="content-media background-image {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );">
	</div>
</div>

<!--The toggle button will only shows when screen < 768px-->
<a href="#" role="button" tabindex="0" data-toggle="modal" class="cui card toggle-btn mb-md animate__animated animate__fadeInUp"  data-target="{{ ID }}">
	<div class="card-body">
		<div class="subtitle-block red-underline cui pt-0 pb-0 text-left">
			<h2>{{ Title }}</h2>
			<hr>
		</div>
	</div>	
	<div class="card-media">
		<div class="background-image ratio-16x9 {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
	</div>		
	<div class="card-body">
		<p class="card-context-title text-left">{{ Content }}</p>
	</div>
</a>
<!--The toggle modal will display the content that shows on the desktop cards-->
<div id="{{ ID }}" data-component="Modal" class="cui modal toggle-modal" tabindex="-1" role="dialog" aria-labelledby="toggle-modal" aria-hidden="true">
	<div class="modal-dialog modal-fs animate__animated animate__fadeInDown" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
			</div>

			<div class="background-image {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }} " style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );">
			</div>

			<div class="modal-body">
					<div class="col-12 subtitle-block red-underline cui">
						<h2>{{ Title }}</h2>
						<hr>
					</div>
					<nav aria-labelledby="main-menu-list" class="toggle-container-menu-list">
						<ul>
							<li>
								<a href="{{ URL }}">
									<span class="{{ Icon class }}" aria-hidden="true"></span>
									{{ Title }}
								</a>
							</li>
							<li>
								<a href="{{ URL }}">
									<span class="{{ Icon class }}" aria-hidden="true"></span>
									{{ Title }}
								</a>
							</li>
						</ul>
					</nav>
					<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Call to action }}</a>
			</div>
		</div>
	</div>
</div>