<div class="frame">
<div class="frame__left">
<div class="frame__back">
<button class="frame-button" onclick="history.back(-1)">arrow_back</button>
</div>
<nav class="frame__left-nav">
<a class="frame-nav" href="#">Updates</a>
<a class="frame-nav" href="#">About us</a>
</nav>
<div class="frame__social">
<a class="frame-button" href="https://www.facebook.com/BertelsmannFoundation/" target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
</a>
<a class="frame-button" href="https://twitter.com/BertelsmannFdn" target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
</a>
<a class="frame-button" href="https://www.youtube.com/channel/UCZZdgI5F7KjUCW0fCKUOAAg" target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
</a>
<a class="frame-button" href="https://www.instagram.com/ber…annfoundation/?hl=en" target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
</a>
<a class="frame-button" href="https://vimeo.com/bfna" target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M 404.00,298.00 405.51,288.24 414.18,267.17 418.75,258.00 426.47,242.53 436.78,226.29 449.04,214.04 474.66,188.41 508.59,178.59 544.00,179.00 567.25,179.28 591.19,187.76 604.30,208.00 618.93,230.58 618.30,257.27 618.00,283.00 617.64,313.26 597.15,357.83 582.28,384.00 561.90,419.85 538.74,452.51 513.42,485.00 491.27,513.43 467.93,541.12 441.00,565.16 420.57,583.41 398.29,600.31 372.00,609.00 357.54,613.78 341.75,616.09 327.00,611.25 303.39,603.50 285.32,572.74 276.00,551.00 276.00,551.00 269.08,534.00 269.08,534.00 269.08,534.00 257.58,492.00 257.58,492.00 257.58,492.00 237.15,417.00 237.15,417.00 237.15,417.00 224.33,371.00 224.33,371.00 218.79,354.01 212.93,335.98 203.00,321.00 198.94,314.87 192.35,306.77 185.00,304.65 176.55,302.21 160.03,315.31 153.00,320.00 150.27,321.82 144.31,326.73 141.04,325.70 137.95,324.74 129.77,313.12 127.35,310.00 125.54,307.66 120.30,301.33 119.36,299.00 117.32,293.96 122.75,290.88 126.00,287.93 126.00,287.93 152.00,264.84 152.00,264.84 175.59,243.77 198.64,220.94 225.00,203.33 238.72,194.17 254.00,185.18 271.00,185.00 301.70,184.69 318.97,203.78 328.95,231.00 335.99,250.22 340.20,281.13 343.27,302.00 347.52,330.81 353.11,359.58 359.42,388.00 363.38,405.82 368.46,423.69 376.76,440.00 379.82,446.03 385.70,455.44 393.00,456.52 398.02,457.26 403.34,453.13 407.00,450.19 416.13,442.86 427.64,426.97 434.33,417.00 445.78,399.93 459.42,377.01 467.00,358.00 471.41,346.95 475.26,335.03 474.99,323.00 474.53,303.15 463.27,290.24 443.00,290.00 423.60,289.78 420.78,293.48 404.00,298.00 Z" /></svg>
</a>
<a class="frame-button" href="https://www.linkedin.com/company/bertelsmann-foundation-north-america-inc." target="_blank">
<svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13-24 44-50 91-50 98 0 116 64 116 148v170h-96V478c0-36-2-82-51-82-50 0-57 39-57 79v154zM220 164c31 0 55 25 55 56s-24 56-55 56-56-25-56-56 25-56 56-56z"/></svg>
</a>
</div>
</div>
<div class="frame__top">
<div class="frame__menu">
<button class="frame-button frame__menu-trigger">menu</button>
</div>
<a href="/" class="frame__logo is-hidden"><svg version="1.1" id="bfna-logo" class="bfna-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 695.1 266.6" style="enable-background:new 0 0 695.1 266.6;" xml:space="preserve">
<path class="st0" d="M62.2,76.5c0-13.7-8.1-24.4-22-26.6c7-4.3,12.4-11.8,12.4-23.3C52.6,10.7,41.8,0,23.3,0H0v106.3h29.2
C48.4,106.3,62.2,95.1,62.2,76.5z M7,6.4h13.5c5.6,0,12.5,0.3,17.7,4.5c3.5,2.9,7.2,8.1,7.2,16.6c0,7.3-2.7,12.7-7,16.2
c-4.6,3.8-9.1,4.5-14.5,4.5H7V6.4z M7,99.9V54.5h16.6c11.8,0,17.1,1.7,19.9,3c8,3.7,11.3,10.2,11.3,19.8c0,4.9-1.1,11.2-6.9,16.3
c-7.2,6.4-15.9,6.4-23.1,6.4H7z"/>
<path class="st0" d="M110.1,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
l55.6-0.1c0-20.7-13.2-34.7-30.8-34.7c-15.9,0-31.5,11.6-31.5,34.2C78.1,93,89.9,108,110.1,108z M109.6,46
c12.9,0,22.5,9.7,24.1,22.6l-48.4-0.1C87,55.9,96.4,45.9,109.6,46z"/>
<path class="st0" d="M165.6,106.3V71.4c0-8.1,0.2-25.5,13.2-25.5c2.9,0,4.1,0.8,4.8,1.3l3.1-5.8c-2.1-1.1-4.5-1.6-6.8-1.6
c-7,0-12,4.3-14.3,9.9v-8.4h-6.4l0,65H165.6z"/>
<polygon class="st0" points="201.1,106.3 207.5,106.3 207.5,47.3 218.8,47.3 218.8,41.3 207.5,41.3 207.5,18 201.1,18 201.1,41.3
193.9,41.3 193.9,47.3 201.1,47.3 "/>
<path class="st0" d="M259.4,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
l55.6-0.1c0-20.7-13.2-34.7-30.7-34.7c-15.9,0-31.5,11.6-31.5,34.2C227.4,93,239.2,108,259.4,108z M258.9,45.9
c12.9,0,22.5,9.7,24.1,22.7l-48.4-0.1C236.3,55.9,245.7,45.9,258.9,45.9z"/>
<rect x="308.5" class="st0" width="6.4" height="106.3"/>
<path class="st0" d="M353.6,102c-7.2,0-14-4.5-16.2-13.1l-6.2,1.9c2.7,10.8,11.6,17.2,22.5,17.2c10,0,21.2-5.9,21.2-20.7
c0-3.7-0.6-7.2-3.3-10.5c-4.1-5.3-10.2-7-16.7-9.6c-6.4-2.5-11.5-4.6-11.5-11c0-4.8,3.7-10.4,11-10.4c4.9-0.1,9.4,2.8,11.3,7.3
l5.4-2.8c-3-7-9.4-10.5-17-10.5c-9.9,0-17.4,6.9-17.4,16.7c0,3.1,1,6,2.9,8.5c2.9,3.8,7.6,5.9,14.2,8.6c9.9,4,14.5,6.7,14.5,14
C368.1,96.1,361.9,102,353.6,102z"/>
<path class="st0" d="M397.3,68.7c0-12.9,5.3-22.8,16.6-22.8c14,0,14.3,14.5,14.3,18.6v41.8h6.4V67.1c0-4,0.2-21.2,17.4-21.2
c3.6-0.2,7.1,1.2,9.7,3.7c3.5,3.7,3.8,9.1,3.8,13.4v43.3h6.4V63c0-5.3-0.3-12.4-5.6-17.7c-2.9-2.9-7.5-5.4-14.7-5.4
c-8.6,0-15.6,4-19.3,11.8c-1.3-3.3-5.4-11.8-18.2-11.8c-7-0.3-13.5,3.4-16.9,9.6v-8.1H391v65h6.3V68.7z"/>
<path class="st0" d="M522.5,108.1c10.2,0.2,19.7-4.9,25.3-13.4v11.6h6.4v-65h-6.4v11.4c-6.2-8.8-15.1-12.8-25.3-12.8
c-19,0-31.7,13.9-31.7,33.9C490.8,95.2,505.4,108.1,522.5,108.1z M522.8,45.9c11.2,0,25.3,8.1,25.3,27.4c0,15-8.9,28.7-25.2,28.7
c-16.4,0-25.5-14-25.5-28.7C497.5,55.6,509.9,45.9,522.8,45.9z"/>
<path class="st0" d="M583.5,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4v65h6.4V72.5z"/>
<path class="st0" d="M653.9,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4l0,65h6.4V72.5z"/>
<path class="st0" d="M329.9,162.6h-9.5v64.2h9.5c19.3,0,32.5-13.1,32.5-32.1C362.5,176.1,349.1,162.6,329.9,162.6z"/>
<polygon class="st0" points="389.3,202.9 416.9,202.9 403.2,168.3 "/>
<path class="st0" d="M543.6,161.6c-18.8,0-32.8,14.6-32.8,33.3c0,18.7,14,33.2,32.8,33.2s32.8-14.6,32.8-33.2h0
C576.5,176.2,562.5,161.6,543.6,161.6z"/>
<path class="st0" d="M106.8,161.6C88,161.6,74,176.2,74,194.9c0,18.7,14,33.2,32.8,33.2c18.8,0,32.8-14.6,32.8-33.2h0.1
C139.6,176.2,125.6,161.6,106.8,161.6z"/>
<path class="st0" d="M0,122.5v144.1h695.1V122.5H0z M61.3,162.6H36.5v26.5h24.1v4.4H36.5v37.8h-4.8v-73h29.6V162.6z M144.6,194.9
c0,21-16.5,37.5-37.9,37.5c-21.3,0-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S144.6,174,144.6,194.9L144.6,194.9z M210.1,203.9
c0,8-0.4,13.2-4.2,18.7c-5.5,8-14.1,9.8-20.7,9.8s-15.2-1.9-20.7-9.8c-3.7-5.5-4.2-10.7-4.2-18.7v-45.6h4.7v45.6
c0,6.9,0.3,11.4,3.1,15.8c4.3,6.9,12.3,8.4,17,8.4c4.7,0,12.7-1.5,17-8.4c2.7-4.4,3.1-8.9,3.1-15.8v-45.7h4.8V203.9z M295.8,233.1
L234.6,169v62.3l-4.9,0v-73.8l61.3,64.2v-63.4h4.8V233.1z M357,221.1c-9.2,9.2-20.5,10.2-26.9,10.2l-14.5,0v-73H330
c6.5,0,17.7,1,26.9,10.2c7.8,7.8,10.5,18.4,10.5,26.4S364.8,213.3,357,221.1z M428.4,231.3l-9.7-24h-31.1l-9.7,24h-5.3l30.8-75.2
l30.3,75.2H428.4z M473.8,162.6h-18.9v68.6H450v-68.6h-18.9v-4.4h42.7V162.6z M490,231.2h-4.8v-73h4.8V231.2z M581.5,194.9
c0,21-16.5,37.5-37.9,37.5s-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S581.5,174,581.5,194.9L581.5,194.9z M663.3,233.1
L602,169v62.3l-4.8,0v-73.8l61.3,64.2v-63.4h4.8V233.1z"/>
</svg>
</a>
<nav class="frame__top-nav">
<a class="frame-nav frame-nav--digital-world" href="#">Digital World</a>
<a class="frame-nav frame-nav--future-leadership" href="#">Future Leadership</a>
<a class="frame-nav frame-nav--democracy" href="#">Democracy</a>
<a class="frame-nav frame-nav--politics-society" href="#">Politics & Society</a>
</nav>
<div class="frame__search" aria-hidden>
<form action="" class="frame-search">
<button class="frame-search__button frame-button frame-search__trigger">search</button>
<input class="frame-search__field" type="text" placeholder="Search...">
<input class="frame-search__submit" type="submit" value="Search">
</form>
</div>
</div>
</div>
<div class="off-canvas">
<button class="off-canvas__close"><i class="material-icons">close</i></button>
<section class="off-canvas__col">
<nav class="off-canvas__nav off-canvas--updates">
<h2 class="off-canvas__heading">Updates</h2>
<a href="#" class="off-canvas__item">Articles</a><br>
<a href="#" class="off-canvas__item">Infographics</a><br>
<a href="#" class="off-canvas__item">Videos</a><br>
</nav>
<nav class="off-canvas__nav off-canvas--about">
<h2 class="off-canvas__heading">The Foundation</h2>
<a href="#" class="off-canvas__item">About the Foundation</a><br>
<a href="#" class="off-canvas__item">Board of Directors | Team</a><br>
<a href="#" class="off-canvas__item">Bertelsmann Stiftung</a><br>
<a href="#" class="off-canvas__item">Contact</a><br>
</nav>
</section>
<section class="off-canvas__col off-canvas--right-col">
<nav class="off-canvas__nav off-canvas--topics">
<h2 class="off-canvas__heading">Topics</h2>
<a href="#" class="off-canvas__item">Democracy</a><br>
<a href="#" class="off-canvas__item">Digital World</a><br>
<a href="#" class="off-canvas__item">Politics & Society</a><br>
</nav>
<nav class="off-canvas__nav off-canvas--archive">
<a href="#" class="off-canvas__item">Archived Projects</a><br>
</nav>
</section>
</div>
<section class="main-content product-page product-page--super product-page--future-leadership">
<div class="product-hero product-hero--future-leadership product-hero--website">
<div class="announcement announcement--democracy">
<a class="announcement__content" href="#"><strong>Just Launched</strong><span> | </span>How to Fix Democracy Season 2</a>
</div>
<div class="product-hero__wrapper">
<div class="product-hero__content stack-l">
<div class="breadcrumbs">
<a class="breadcrumbs__page-link" href="/">Home</a>
<svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
</svg>
<a class="breadcrumbs__page-link" href="/democracy/">Democracy</a>
<svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
</svg>
<span class="breadcrumbs__current-page">Cyber Democracy</span>
</div>
<h1 class="product-hero__heading">The Future Leadership</h1>
<h2 class="product-hero__subheading">Transatlantic Cities & the Future Leadership</h2>
<p class="product-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
<a href="#" class="button button--primary button--navy">Go to Project Website</a>
</div>
<div class="product-hero__image">
<img src="/images/products/future-leadership/the-future-of-work-transatlantic-cities-and-the-future-of-work.png" alt="The Future Leadership | Transatlantic Cities & the Future Leadership">
</div>
</div>
</div>
<section class="secondary-section">
<hgroup class="wrapper">
<h2 class="text-align:center">CEPI Yearbook</h2>
<h4 class="text-align:center">We could have something longer written here to be more descriptive about the list the user will see now</h4>
</hgroup>
<div class="product-list wrapper stack-l">
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
<div class="product-card product-card--politics-society product-card--item">
<div class="product-card__image">
<img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
</div>
<div class="product-card__content">
<header class="product-card__header">
<h2 class="product-card__heading">2019 Edition</h2>
<h3 class="product-card__subheading"></h3>
</header>
<div class="product-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
</div>
<footer class="product-card__footer">
<a href="#" class="button button--primary button--politics-society" target="_blank">Learn More</a>
</footer>
</div>
</div>
</div>
</section>
</section>
<footer class="footer">
<div class="wrapper wrapper--padded">
<div class="footer__content footer--top">
<p class="footer__tagline">Transatlantic Perspectives on Global Challenges</p>
<div class="footer__social">
<a class="footer__button" href="#" target="_blank">
<svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
</a>
<a class="footer__button" href="#" target="_blank">
<svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
</a>
<a class="footer__button" href="#" target="_blank">
<svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
</a>
<a class="footer__button" href="#" target="_blank">
<svg role="img" fill="white" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
</a>
</div>
</div>
<div class="footer__content">
<div class="footer__section">
<h3 class="footer__heading">Topics</h3>
<ul class="footer__links">
<li><a class="footer__link" href="/democracy">Democracy</a></li>
<li><a class="footer__link" href="/future-leadership">Future Leadership</a></li>
<li><a class="footer__link" href="/digital-world">Digital World</a></li>
<li><a class="footer__link" href="/politics-society">Politics & Society</a></li>
</ul>
</div>
<div class="footer__section">
<h3 class="footer__heading">The Foundation</h3>
<ul class="footer__links">
<li><a class="footer__link" href="/about">About</a></li>
<li><a class="footer__link" href="/board-of-directors">Board of Directors</a></li>
<li><a class="footer__link" href="/team">Team</a></li>
<li><a class="footer__link" href="/bertelsmann-stiftung">Bertelsmann Stiftung</a></li>
</ul>
</div>
<div class="footer__section">
<h3 class="footer__heading">Updates</h3>
<ul class="footer__links">
<li><a class="footer__link" href="/articles">Publications</a></li>
<li><a class="footer__link" href="/infographics">Infographics</a></li>
<li><a class="footer__link" href="/videos">Videos</a></li>
</ul>
</div>
<div class="footer__section">
<h3 class="footer__heading">Contact</h3>
<p class="footer__address">Bertelsmann Foundation<br>1108 16th Street, NW Floor 1, Washington, DC, USA 20036 +1.202.384.1980</p>
</div>
</div>
</div>
<div class="footer__ribbon">
<div class="wrapper">
<p class="footer__copyright">© 2020 Copyright Bertelsmann Foundation.</p>
<p class="footer__by-line"><a href="https://ccmdesign.ca" target="_blank">by ccm.design</a></p>
</div>
</div>
</footer>
{% render '@frame' %}
<section class="main-content product-page product-page--super product-page--{{theme}}">
{% render '@product-hero--website' %}
<section class="secondary-section">
<hgroup class="wrapper">
<h2 class="text-align:center">CEPI Yearbook</h2>
<h4 class="text-align:center">We could have something longer written here to be more descriptive about the list the user will see now</h4>
</hgroup>
<div class="product-list wrapper stack-l">
{% render '@product-card--item' %}
{% render '@product-card--item' %}
{% render '@product-card--item' %}
{% render '@product-card--item' %}
{% render '@product-card--item' %}
{% render '@product-card--item' %}
</div>
</section>
</section>
{% render '@footer' %}
{
"theme": "future-leadership",
"modifier": "default",
"team_section": {
"heading": "Project team",
"subheading": "We could have something longer written here to be more descriptive about the product team",
"team": [
{
"name": "Brandon Bohrn",
"job": "Manager, Transatlantic Relations"
},
{
"name": "Emily Benson",
"job": "Manager, Transatlantic Legislative Relations"
},
{
"name": "Irene Braam",
"job": "Executive Director"
}
]
},
"variants": [
{
"name": "super",
"context": {
"theme": "politics-society",
"products": {
"heading": "CEPI Yearbook",
"subheading": "We could have something longer written here to be more descriptive about the list the user will see now"
}
}
}
]
}
.product-page {
--theme-hsl: var(--navy-hsl);
.secondary-section {
hgroup {
margin-bottom: var(--s3);
h2 {
color: hsla(var(--theme-hsl), 1);
margin-bottom: var(--s-1);
}
h4 { margin-top: 0;}
}
}
}
.product-page--super {
.product-list {
@include breakpoint($medium-max) { --space: var(--s3) }
padding-bottom: var(--s4);
}
}
.product-page--democracy {
--theme-hsl: var(--green-hsl);
}
.product-page--future-leadership {
--theme-hsl: var(--red-hsl);
}
.product-page--politics-society {
--theme-hsl: var(--yellow-hsl);
}
.product-page--digital-world {
--theme-hsl: var(--purple-hsl);
}
There are no notes for this item.