<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/transporting-energy-banner3.png" />
						<source media="(max-width: 1400px)" srcset="/brain/masterminds/2022/images/transporting-energy-banner2.png" />
						<img class="top" src="/brain/masterminds/2022/images/transporting-energy-banner1.jpg" alt="Transporting Energy" />
					</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>Transporting Energy</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/building-smart/">Go to Previous Story</a>
					<a class="button" href="/brain/masterminds/2022/pondering-the-future/">Go to Next Story</a>
					</div>
		</div>
	</div>
</section>