<!-- Topic Row -->
<div class="topics">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">
            <div class="topics_inner">
                <div class="topics_header">
                    <h2 class="topics_title">
                        <span class="topics_title_label">Ipsum Fermentum Tristique</span>
                    </h2>
                    <div class="topics_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
                <div class="topics_body">
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">

                                <img class="topic_image" srcset="https://images.fastspot.com/hamilton/740x494/1 740w, https://images.fastspot.com/hamilton/500x334/1 500w, https://images.fastspot.com/hamilton/300x200/1 300w" src="https://images.fastspot.com/hamilton/300x200/1" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Ipsum Fermentum Tristique</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                    </div>
                                </div>
                                <div class="topic_links">
                                    <div class="topic_link_item">

                                        <a href="#" class="topic_link">
                                            <span class="topic_link_inner">
                                                <span class="topic_link_label">Link Title One</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="topic_link_item">

                                        <a href="#" class="topic_link">
                                            <span class="topic_link_inner">
                                                <span class="topic_link_label">Link Title Two</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">

                                <img class="topic_image" srcset="https://images.fastspot.com/hamilton/740x494/2 740w, https://images.fastspot.com/hamilton/500x334/2 500w, https://images.fastspot.com/hamilton/300x200/2 300w" src="https://images.fastspot.com/hamilton/300x200/2" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Ipsum Fermentum Tristique</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="topic_inner">
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Ipsum Fermentum Tristique</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                    </div>
                                </div>
                                <div class="topic_links">
                                    <div class="topic_link_item">

                                        <a href="#" class="topic_link">
                                            <span class="topic_link_inner">
                                                <span class="topic_link_label">Link Title One</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="topic_link_item">

                                        <a href="#" class="topic_link">
                                            <span class="topic_link_inner">
                                                <span class="topic_link_label">Link Title Two</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="topic_link_item">

                                        <a href="#" class="topic_link">
                                            <span class="topic_link_inner">
                                                <span class="topic_link_label">Link Title Three</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="topic_inner">
                            <figure class="topic_figure" aria-hidden="true">

                                <img class="topic_image" srcset="https://images.fastspot.com/hamilton/740x494/2 740w, https://images.fastspot.com/hamilton/500x334/2 500w, https://images.fastspot.com/hamilton/300x200/2 300w" src="https://images.fastspot.com/hamilton/300x200/2" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="topic_wrapper">
                                <div class="topic_header">
                                    <h3 class="topic_title">Ipsum</h3>
                                </div>
                                <div class="topic_body">
                                    <div class="topic_description">
                                        <p>Praesent</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
{#
	{% include '@component-topic-row' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#',
						icon: 'caret_right'
					}
				]
			}
		]
	} %}
#}

<!-- 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 }}</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">
										{% include '@partial-image' with {
											class: 'topic',
											alt: '',
											image: item.image,
											loading: 'lazy',
											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 }}</h3>
										{% else %}
											<h2 class="topic_title">{{ item.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 %}
												<div class="topic_link_item">
													{% include '@partial-link' with {
														class: 'topic',
														title: link.title,
														url: link.url,
														icon: link.icon
													} %}
												</div>
											{% endfor %}
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.