<div class="topics_banner js-topics-banner">
<div class="topics_banner_inner">
<header class="topics_banner_header">
<div class="fs-row">
<div class="fs-cell">
<div class="topics_banner_header_inner">
<h2 class="topics_banner_title">
Topics
</h2>
</div>
</div>
</div>
</header>
<div class="topics_banner_content">
<div class="topics_banner_grid js-grid">
<div class="topics_banner_grid_row js-row">
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Games for Health
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Digital Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Internet Gaming Disorder
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Cyberbulling Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Virtual Reality
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Global Perspective
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Family and Parenting
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Cognitive Impacts
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Participatory Politics
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Media and Sex
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Guidelines for Parents
</div>
</div>
</div>
</div>
<div class="topics_banner_grid_row js-row">
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Games for Health
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Digital Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Internet Gaming Disorder
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Cyberbulling Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Virtual Reality
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Global Perspective
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Family and Parenting
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Cognitive Impacts
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Participatory Politics
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Media and Sex
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Guidelines for Parents
</div>
</div>
</div>
</div>
<div class="topics_banner_grid_row js-row">
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Games for Health
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Digital Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Internet Gaming Disorder
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Cyberbulling Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Virtual Reality
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Global Perspective
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Family and Parenting
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Cognitive Impacts
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Participatory Politics
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Media and Sex
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Guidelines for Parents
</div>
</div>
</div>
</div>
<div class="topics_banner_grid_row js-row">
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Games for Health
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Digital Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Internet Gaming Disorder
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Cyberbulling Literacy
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Virtual Reality
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_dark_green">
Global Perspective
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_yellow">
Family and Parenting
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_salmon">
Cognitive Impacts
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_green">
Participatory Politics
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_pink">
Media and Sex
</div>
</div>
</div>
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_light_blue">
Guidelines for Parents
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="topics_banner js-topics-banner">
<div class="topics_banner_inner">
<header class="topics_banner_header">
<div class="fs-row">
<div class="fs-cell">
<div class="topics_banner_header_inner">
<h2 class="topics_banner_title">
{{ title }}
</h2>
</div>
</div>
</div>
</header>
<div class="topics_banner_content">
<div class="topics_banner_grid js-grid">
{% for i in 1..rows %}
<div class="topics_banner_grid_row js-row">
{% set color_pattern = loop.index is odd ? color_patterns.secondary : color_patterns.primary %}
{% for item in items %}
{% set theme = get_theme_key(color_pattern, loop.index0) %}
<div class="topics_banner_grid_item">
<div class="topics_banner_item_magnetize js-magnetize">
<div class="topics_banner_item_magnetize_target js-magnetize-target"></div>
<div class="button theme_{{ theme }}">
{{ item }}
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
No notes defined.