<!-- Topic Row -->
<div class="topics">
    <div class="topics_header">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-lg-8">
                <div class="topics_header_inner">
                    <h2 class="topics_title">Topic Group Title</h2>
                    <div class="topics_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="topics_body">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-lg-10">
                <div class="topics_inner">
                    <div class="topics_items">

                        <div class="topic theme_light_green direction_normal has_media">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h3 class="topic_title">What We Do</h3>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>We are committed to developing talent in the field, supporting interdisciplinary scientific research, positively influencing public policy, and keeping the public educated and informed.</p>
                                        </div>
                                    </div>
                                    <div class="topic_links">
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link theme_light_green">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title One</span>
                                                    <span class="topic_link_icon" aria-hidden="true">

                                                        <svg class="icon icon_arrow_right_long">
                                                            <use href="/images/icons.svg#arrow_right_long" />
                                                        </svg>

                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link theme_light_green">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title Two</span>
                                                    <span class="topic_link_icon" aria-hidden="true">

                                                        <svg class="icon icon_arrow_right_long">
                                                            <use href="/images/icons.svg#arrow_right_long" />
                                                        </svg>

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

                        <div class="topic theme_yellow direction_reverse has_media">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h3 class="topic_title">Who We Are</h3>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Since 2013, the Children and Screens team has sought to help young people lead healthy lives in our increasingly digital world.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="topic theme_light_blue direction_normal has_media">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h3 class="topic_title">Work With Us</h3>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Our organization provides a collaborative, fully-remote environment where student interns and team members work to bring our mission to life.</p>
                                        </div>
                                    </div>
                                    <div class="topic_links">
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link theme_light_blue">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title One</span>
                                                    <span class="topic_link_icon" aria-hidden="true">

                                                        <svg class="icon icon_arrow_right_long">
                                                            <use href="/images/icons.svg#arrow_right_long" />
                                                        </svg>

                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link theme_light_blue">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title Two</span>
                                                    <span class="topic_link_icon" aria-hidden="true">

                                                        <svg class="icon icon_arrow_right_long">
                                                            <use href="/images/icons.svg#arrow_right_long" />
                                                        </svg>

                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link theme_light_blue">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title Three</span>
                                                    <span class="topic_link_icon" aria-hidden="true">

                                                        <svg class="icon icon_arrow_right_long">
                                                            <use href="/images/icons.svg#arrow_right_long" />
                                                        </svg>

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

                        <div class="topic theme_salmon direction_reverse ">
                            <div class="topic_inner">
                                <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>
</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: 'arrow_right'
					}
				]
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="topics">
	{% if title or description %}
		<div class="topics_header">
			<div class="fs-row fs-lg-justify-center">
				<div class="fs-cell fs-lg-8">
					<div class="topics_header_inner">
						{% if title %}
							<h2 class="topics_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="topics_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="topics_body">
		<div class="fs-row fs-lg-justify-center">
			<div class="fs-cell fs-lg-10">
				<div class="topics_inner">
					<div class="topics_items">
						{% for item in items %}
							{% set theme = get_theme_key(color_patterns.ternary, loop.index0) %}
							{% set direction = loop.index is odd ? "normal" : "reverse" %}
							{% set has_media = item.image ? "has_media" : "" %}
							
							<div class="topic theme_{{ theme }} direction_{{ direction }} {{ has_media }}">
								<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: "arrow_right_long"
														} %}
													</div>
												{% endfor %}
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.