<div class="interactives_detail_top">
    <div class="interactives_detail_top_inner">
        <div class="interactives_detail_top_breadcrumbs">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="breadcrumb">
                        <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                            <div class="breadcrumb_nav_header">
                                <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                            </div>
                            <ol class="breadcrumb_list multiple" aria-labelledby="breadcrumb_nav_title">
                                <li class="breadcrumb_item breadcrumb_item_home">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                <svg class="icon icon_home">
                                                    <use href="/images/icons.svg#home" />
                                                </svg>
                                            </span>

                                            <span class="breadcrumb_pill_icon_back" aria-hidden="true" aria-label="Go Back">
                                                <svg class="icon icon_arrow_back_breadcrumbs">
                                                    <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                                </svg>
                                            </span>

                                            <span class="breadcrumb_pill_label">Home</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Commentary & Analysis</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Interactives</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <span class="breadcrumb_pill">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Page Title</span>
                                        </span>
                                    </span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <header class="interactives_detail_top_head">
            <div class="fs-row">
                <div class="fs-cell fs-lg-7 fs-lg-justify-center">
                    <div class="interactives_detail_top_head_inner">
                        <time class="interactives_detail_top_date" datetime="2020-08-12">
                            August 12, 2020
                        </time>

                        <h1 class="interactives_detail_top_title">
                            How Serious Is the North Korea Nuclear Threat?
                        </h1>

                        <div class="interactives_detail_top_meta">
                            <div class="interactives_detail_top_type">
                                <a class="interactives_detail_top_type_link" href="">
                                    Interactives
                                </a>
                            </div>

                            <div class="interactives_detail_top_author">
                                John Austin, Jeffrey Anderson, Colleen Dougherty, Brian Hanson, Jürgen Hein, Alexander Hitch, and Andy Westwood
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="interactives_detail_top_img_wrap">
            <div class="fs-row">
                <div class="fs-cell fs-lg-10 fs-lg-justify-center">
                    <div class="interactives_detail_top_img_wrap_inner">

                        <span class="lazy_image_wrapper interactives_detail_top_image_wrapper">
                            <img class="js-lazy js-lazyload interactives_detail_top_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/5 1220w" alt="">
                        </span>
                        <noscript>
                            <img class="interactives_detail_top_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/5" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/5 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w" sizes="100vw" alt="">
                        </noscript>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<div class="interactives_detail_top">
	<div class="interactives_detail_top_inner">
		<div class="interactives_detail_top_breadcrumbs">
			<div class="fs-row">
				<div class="fs-cell">
					{% render '@navigation-breadcrumb--interactives-detail' %}
				</div>
			</div>
		</div>

		<header class="interactives_detail_top_head">
			<div class="fs-row">
				<div class="fs-cell fs-lg-7 fs-lg-justify-center">
					<div class="interactives_detail_top_head_inner">
						<time class="interactives_detail_top_date" datetime="{{ date }}">
							{{ date|date("F j, Y") }}
						</time>

						<h1 class="interactives_detail_top_title">
							{{ title }}
						</h1>

						<div class="interactives_detail_top_meta">
							<div class="interactives_detail_top_type">
								<a class="interactives_detail_top_type_link" href="{{ type.link }}">
									{{ type.name }}
								</a>
							</div>

							<div class="interactives_detail_top_author">
								{{ author }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>

		<div class="interactives_detail_top_img_wrap">
			<div class="fs-row">
				<div class="fs-cell fs-lg-10 fs-lg-justify-center">
					<div class="interactives_detail_top_img_wrap_inner">
						{% if image_credit %}
							<div class="interactives_detail_top_img_credit">
								<div class="interactives_detail_top_img_credit_inner">
									{{ image_credit }}
								</div>
							</div>
						{% endif %}

						{% render "@partial-image" with {
							class: "interactives_detail_top",
							image: image,
							sources: [
								img.wide.lrg,
								img.wide.med,
								img.wide.sml,
								img.wide.xsml
							]
						} %}
					</div>
				</div>
			</div>
		</div>

		{% if summary %}
			<div class="interactives_detail_top_summary">
				<div class="fs-row">
					<div class="fs-cell fs-lg-8 fs-lg-justify-center">
						<div class="interactives_detail_top_summary_inner">
							<p>{{ summary }}</p>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>

	{% if button %}
		<div class="interactives_detail_top_btn">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="interactives_detail_top_btn_inner">
						{% render "@partial-button--mint-green" with button %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>

No notes defined.