Content Channel with Child Items

<style>
.header-banner { height: 100px; background-size: cover; background-position: center center; background-repeat: no-repeat; }
  @media (min-width: 992px) { .header-banner { height: 200px; } }
.card-body { padding: 15px; height: 150px; font-size: 17px; }
  @media (min-width: 768px) and (max-width: 991px) { .card-body { padding: 6px; } }
  @media (min-width: 992px) and (max-width: 1349px) { .card-body { font-size: 14px; } }
  @media (min-width: 1350px) { .card-body { padding: 10px; } }
  @media (min-width: 1550px) { .card-body { padding: 15px; font-size: 18px; } }
.card { border: 1px solid rgba(0, 0, 0, .3); position: relative; height: 444px; }
.card h1 { font-size: 20px; font-weight: 600; margin: 4px 0; }
.card h4 { font-size: 16px; font-weight: 200; margin: 4px 0; }
.card-dates { opacity: .6; background-color: #dfdfdf; padding: 5px; }
.card-header { background-color: #eee; padding: 5px; }
.card-summary { height: auto; overflow: hidden; margin: 10px 0; }
.card-link:hover { text-decoration: none; }
.card-image { height: 200px; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.card-image:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all .1s ease-in-out; }
.card-image:hover:after { background: rgba(0,0,0,.2); }
.series-title{ margin-bottom: 4px; }
.series-dates { opacity: .6; }
.pager { max-width: 300px; margin: 10px auto; }
.pager li, .pager a { min-width: 100px; }
.pager .previous a, .pager .next a { padding: 12px; background-color: #0090bf; color: #fff; }
.pager li > a:hover, .pager li > a:focus { background-color: #333; }
.pager .previousoff {float: left; line-height: 46px; border: 1px solid #ddd; border-radius: 15px; }
.pager .nextoff {float: right; line-height: 46px; border: 1px solid #ddd; border-radius: 15px; }
.pager .count { min-width: 100px; line-height: 46px; }
</style>

{% if Item %}
	<article class="series-detail">
		{% assign seriesImageGuid = Item | Attribute:'SeriesHeader','RawValue' %}
		<div class="header-banner" style="background-image: url('/GetImage.ashx?Guid={{ seriesImageGuid }}');" ></div>
		<h1 class="series-title">{{ Item.Title }}</h1>
		<script>function fbs_click() { u = location.href; t = document.title; window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=436'); return false; }</script>
		<script>function ics_click() { text = `{{ EventItemOccurrence.Schedule.iCalendarContent }}`.replace('END:VEVENT', 'SUMMARY: {{ Event.Name }}\r\nLOCATION: {{ EventItemOccurrence.Location }}\r\nEND:VEVENT'); var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', '{{ Event.Name }}.ics'); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); }</script>
		<ul class="socialsharing">
			<li style="color: #888;">Share to:</li>
			<li>
				<a href="https://facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank" class="socialicon socialicon-facebook" title="" data-original-title="Share via Facebook">
					<i class="fa fa-fw fa-facebook"></i>
				</a>
			</li>
			<li>
				<a href="https://twitter.com/intent/tweet?text=Check%20this%20out:%20{{ 'Global' | Page:'Url' | EscapeDataString }}" target="_blank" class="socialicon socialicon-twitter" title="" data-original-title="Share via Twitter">
					<i class="fa fa-fw fa-twitter"></i>
				</a>
			</li>
			<li>
				<a href="mailto:?Subject=I%20want%20to%20share%20this%20with%20you&Body=Check%20this%20out:%20{{ 'Global' | Page:'Url' }}"  class="socialicon socialicon-email" title="" data-original-title="Share via Email">
					<i class="fa fa-fw fa-envelope-o"></i>
				</a>
			</li>
		</ul>
		<div class="margin-t-lg">
			{{ Item.Content }}
		</div>
		<div class="row margin-t-lg">
			{% assign now = 'Now' | Date:'M/d/yyyy' %}
			{% assign pageSize = 6 %}
			{% assign pageNum = 'Global' | PageParameter:'p' | Default:'1' | AsInteger %}
			{% assign children = Item.ChildItems | OrderBy:'ChildContentChannelItem.StartDateTime desc' %}
			{% assign totalCount = children | Size %}
			{% assign showCount = 0 %}
			{% for count in children %}
				{% if count.ChildContentChannelItem.StartDateTime <= now %}
					{% assign showCount = showCount | Plus:1 %}
				{% endif %}
			{% endfor %}
			{% assign unpubCount = totalCount | Minus:showCount %}
			{% assign skipCount = pageNum | Minus:1 | Times:pageSize | Plus:unpubCount %}
			{% assign pageCount = showCount | DividedBy:pageSize | Ceiling %}

			{% for message in children limit:pageSize offset:skipCount %}
				{% assign cardImageGuid = message.ChildContentChannelItem | Attribute:'Image','RawValue' %}
				<div class="col-md-4 col-sm-6 margin-b-md">
			        <a class="card-link" href="/collections/studies/{{ message.ChildContentChannelItem.PrimarySlug }}">
					<article class="card">
						<div class="card-image" style="background-image: url('/GetImage.ashx?Guid={{ cardImageGuid }}');"></div>
						<div class="card-header text-color">
							<h1>{{ message.ChildContentChannelItem.Title }}</h1>
							<h4>{{ message.ChildContentChannelItem | Attribute:'Subtitle' }}</h4>
						</div>
						<div class="card-body">
							<div class="card-summary text-color">{{ message.ChildContentChannelItem.Content | StripHtml | TruncateWords:25,'...'}}</div>
						</div>
						<div class="card-dates text-color">{{ message.ChildContentChannelItem.StartDateTime | Date:'dddd, MMMM d, yyyy' }}</div>
					</article>
					</a>
				</div>
				{% capture breakNow %}{{ forloop.index | Modulo:3 }}{% endcapture %}
			{% endfor -%}
		{% if breakNow == 0 %}
		</div>
		{% endif %}
		{% if pageNum > pageCount %}
			{{ '~/page-not-found' | PageRedirect }}
		{% endif %}
		{% if pageCount > 1 %}
			{% assign pageNumPrev = pageNum | Minus:1 %}
			{% assign pageNumNext = pageNum | Plus:1 %}
			{% assign queryParams = 'Global' | Page:'QueryString' %}
			<div class="margin-t-lg">
				<ul class="pager">
					{% if pageNumPrev == 0 %}
					<li class="previousoff"><i class="fa fa-chevron-left"></i> Prev</li>
					{% else %}
					<li class="previous"><a href="{{ 'Global' | Page:'Path' }}?p={{ pageNumPrev }}"><i class="fa fa-chevron-left"></i> Prev</a></li>
					{% endif %}
					<li class="count">{{ pageNum }} of {{ pageCount }}</li>
					{% if pageNumNext > pageCount %}
					<li class="nextoff">Next <i class="fa fa-chevron-right"></i></li>
					{% else %}
					<li class="next"><a href="{{ 'Global' | Page:'Path' }}?p={{ pageNumNext }}">Next <i class="fa fa-chevron-right"></i></a></li>
					{% endif %}
				</ul>
			</div>
		{% endif %}
	</article>
{% else %}
	<h1>Could not find series.</h1>
{% endif %}