<section class="mb-4"> <div class="swiper"> <div class="swiper-wrapper"><!--slide--> <div class="swiper-slide"> <div class="swiper-grid"> <div class="swiper-image gradient"> <picture> <source media="(max-width: 640px)" srcset="/brain/masterminds/2022/images/pondering-future-banner-3.png" /> <source media="(max-width: 1400px)" srcset="/brain/masterminds/2022/images/pondering-future-banner-2.png" /> <img class="top" src="/brain/masterminds/2022/images/pondering-future-banner-1.jpg" alt="Pondering the Future" /> </picture> </div><!-- moved swiper-section below this area so it can be positioned on top of the swiper area (for issue with multiple linked buttons causing "bouncing" of the slide and trying to swipe instead of click) --> </div> </div> </div> </div> <!-- postioned swiper content section --> <div class="swiper-section"><div class="content-area"> <div class="title"><h1><span>Pondering the Future</span></h1></div> <div class="buttons"> <a class="button" href="/brain/masterminds/2022/table-of-contents/">Table of Contents</a> <a class="button" href="/brain/masterminds/2022/transporting-energy/">Go to Previous Story</a> <a class="button" href="/brain/masterminds/2022/harnessing-the-power-of-discovery/">Go to Next Story</a> </div> </div> </div> </section>