Card Group: One Up

{% if items|length % 4 == 0 %}
	{% set card_count = 4 %}
{% elseif items|length % 3 == 0 %}
	{% set card_count = 3 %}
{% else %}
	{% set card_count = 2 %}
{% endif %}

<!-- Card Group -->
<div class="card_group{% if theme %} theme_{{ theme }}{% endif %} js-checkpoint-fade-up" data-checkpoint-animation="fade-up">
	<div class="card_group_bg"></div>

	<div class="card_group_wrap">
		{% if title or description %}
			<div class="card_group_header">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="card_group_header_inner">
							{% if title %}
								<h2 class="card_group_title">
									{% if title_link %}
										<a href="{{ title_link }}" class="card_group_title_link">{{ title|title }}</a>
									{% else %}
										{{ title|title }}
									{% endif %}
								</h2>
							{% endif %}
							{% if description %}
								<div class="card_group_description">
									<p>{{ description }}</p>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		{% endif %}
		<div class="card_group_body">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="card_group_items card_count_{{ card_count }}{% if carousel_options %} js-carousel{% endif %}" {% if title %} aria-label="{{ title }}" {% endif %}{% if carousel_options %} data-carousel-options='{{ carousel_options }}'{% endif %}>
						{% for item in items %}
							<div class="card_group_item">
								<figure class="card_group_item_figure">
									<a href="#">
										{% render "@partial-image" with {
											class: "card_group_item",
											alt: "",
											image: item.image,
											sources: [
												img.wide.sml,
												img.wide.xsml,
												img.wide.xxsml
											]
										} %}
									</a>
									{% if item.image_tag %}
									<span class="card_group_item_image_center_tag">
										<a href="#">{{ item.image_tag }}</a>
									</span>
									{% endif %}
									{% if item.date %}
									<div class="card_group_item_image_date">
										<div class="card_group_item_image_date_month">{{ item.date|date('M') }}</div>
										<div class="card_group_item_image_date_day">{{ item.date|date('j') }}</div>
									</div>
									{% endif %}
									{% if item.image_credit %}
										<div class="card_group_item_img_credit">
											<div class="card_group_item_img_credit_inner">
												{{ item.image_credit }}
											</div>
										</div>
									{% endif %}
								</figure>
								<div class="card_group_item_body">
									{% if item.title %}
										{% if title %}
											<h3 class="card_group_item_title">
										{% else %}
											<h2 class="card_group_item_title">
										{% endif %}
										{% if item.link %}
											<a href="{{ item.link }}" class="card_group_item_title_link">
										{% endif %}
											<span class="card_group_item_title_label">{{ item.title }}</span>
											{% if item.external %}
											<span class="card_group_item_title_icon">{{ icon("external") }}</span>
											{% endif %}
										{% if item.link %}
											</a>
										{% endif %}
										{% if title %}
											</h3>
										{% else %}
											</h2>
										{% endif %}
									{% elseif item.stat %}
										{% if title %}
											<h3 class="card_group_item_stat">
										{% else %}
											<h2 class="card_group_item_stat">
										{% endif %}
											<span class="card_group_item_stat_figure">{{ item.stat.figure }}{% if item.disclaimer %}<span>*</span>{% endif %}</span>
											<span class="card_group_item_stat_context">{{ item.stat.context }}</span>
										{% if title %}
											</h3>
										{% else %}
											</h2>
										{% endif %}
									{% endif %}
									{% if item.tag or item.labels %}
									<div class="card_group_meta">
										{% if item.tag %}
											<span class="card_group_meta_tag">
												<a href="#">{{ item.tag }}</a>
											</span>
										{% endif %}
										{% if item.labels %}
											{% for label in item.labels %}
												<span class="card_group_meta_label">
													<a href="#">{{ label }}</a>
													{% if not loop.last %}, {% endif %}
												</span>
											{% endfor %}
										{% endif %}
									</div>
									{% endif %}
									{% if item.description %}
									<div class="card_group_item_description">
										<p>{{ item.description }}</p>
									</div>
									{% if item.disclaimer %}
									<span class="card_group_item_disclaimer">* {{ item.disclaimer }}</span>
									{% endif %}
									{% endif %}
									{% if item.event_link %}
									<a href="{{ item.event_link.url }}" class="card_group_item_event_link">{{ item.event_link.name }}</a>
									{% endif %}
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Card Group -->