<!-- Topic Row -->
<div class="topics">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-push-1">
            <div class="topics_inner">
                <div class="topics_header">
                    <h2 class="topics_title">
                        <span class="topics_title_label">Finding Jtcc</span>
                    </h2>
                    <div class="topics_description">
                        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    </div>
                </div>
                <div class="topics_body">
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">
                                <span class="lazy_image_wrapper topic_image_wrapper">
                                    <img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/300x200/1" data-srcset="//images.fastspot.com/jtcc/300x200/1 300w, //images.fastspot.com/jtcc/500x334/1 500w, //images.fastspot.com/jtcc/740x494/1 740w" alt="">
                                </span>
                                <noscript>
                                    <img class="topic_image" src="https://images.fastspot.com/jtcc/740x494/1" srcset="//images.fastspot.com/jtcc/740x494/1 740w, //images.fastspot.com/jtcc/500x334/1 500w, //images.fastspot.com/jtcc/300x200/1 300w" sizes="100vw" alt="" itemprop="image">
                                </noscript>
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Chester Campus</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis.</p>
                                    </div>
                                </div>
                                <div class="topic_links">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Learn More</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Take a Virtual Tour</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">
                                <span class="lazy_image_wrapper topic_image_wrapper">
                                    <img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/300x200/2" data-srcset="//images.fastspot.com/jtcc/300x200/2 300w, //images.fastspot.com/jtcc/500x334/2 500w, //images.fastspot.com/jtcc/740x494/2 740w" alt="">
                                </span>
                                <noscript>
                                    <img class="topic_image" src="https://images.fastspot.com/jtcc/740x494/2" srcset="//images.fastspot.com/jtcc/740x494/2 740w, //images.fastspot.com/jtcc/500x334/2 500w, //images.fastspot.com/jtcc/300x200/2 300w" sizes="100vw" alt="" itemprop="image">
                                </noscript>
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Midlothian Campus - Short Description</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Nullam id dolor id nibh</p>
                                    </div>
                                </div>
                                <div class="topic_links">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Learn More</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Take a Virtual Tour</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">
                                <span class="lazy_image_wrapper topic_image_wrapper">
                                    <img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/300x200/2" data-srcset="//images.fastspot.com/jtcc/300x200/2 300w, //images.fastspot.com/jtcc/500x334/2 500w, //images.fastspot.com/jtcc/740x494/2 740w" alt="">
                                </span>
                                <noscript>
                                    <img class="topic_image" src="https://images.fastspot.com/jtcc/740x494/2" srcset="//images.fastspot.com/jtcc/740x494/2 740w, //images.fastspot.com/jtcc/500x334/2 500w, //images.fastspot.com/jtcc/300x200/2 300w" sizes="100vw" alt="" itemprop="image">
                                </noscript>
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Midlothian Campus</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis.</p>
                                    </div>
                                </div>
                                <div class="topic_links">

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Learn More</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>

                                    <a href="#" class="topic_link">
                                        <span class="topic_link_inner">
                                            <span class="topic_link_label">Take a Virtual Tour</span>
                                            <span class="topic_link_icon" aria-hidden="true">
                                                <span class="topic_link_icon_inner">
                                                    <span class="topic_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
<!-- Topic Row -->
<div class="topics">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="topics_inner">
				{% if title or description %}
					<div class="topics_header">
						{% if title %}
							<h2 class="topics_title">
								<span class="topics_title_label">{{ title|title }}</span>
							</h2>
						{% endif %}
						{% if description %}
							<div class="topics_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				{% endif %}
				<div class="topics_body">
					{% for item in items %}
						<div class="topic">
							<div class="topic_inner">
								{% if item.image %}
									<figure class="topic_figure" aria-hidden="true">
										{% render "@partial-image" with {
                                            class: "topic",
                                            alt: "",
                                            itemprop: "image",
                                            image: item.image,
                                            sources: [
                                                img("classic").sml,
                                                img("classic").xsml,
                                                img("classic").xxsml
                                            ]
                                        } %}
									</figure>
								{% endif %}
								<div class="topic_wrapper">
									<div class="topic_header">
										{% if title %}
											<h3 class="topic_title">{{ item.title|title }}</h3>
										{% else %}
											<h2 class="topic_title">{{ item.title|title }}</h2>
										{% endif %}
									</div>
									<div class="topic_body">
										<div class="topic_description">
											<p>{{ item.description }}</p>
										</div>
									</div>
									{% if item.links %}
										<div class="topic_links">
											{% for link in item.links %}
												{% render "@partial-link" with {
                                                    class: "topic",
                                                    title: link.title,
                                                    url: link.url,
                                                    icon: "caret_right"
                                                } %}
											{% endfor %}
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.