UIkit 3 Three Columns Features Section with Hover Shadow

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<div class="uk-section">
	<div class="uk-container">
		<h2 class="uk-h1 uk-text-center">Features</h2>
		<p class="uk-text-center">Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis, porttitor eget turpis. Morbi porta orci et augue sollicitudin cursus ut eget ligula vitae dolor corpe non sit tortor.</p>
		<div class="uk-child-width-1-3@m uk-grid-match uk-text-center uk-margin-medium-top" uk-grid>
			<div>
				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
					<a class="uk-position-cover" href="#"></a>
					<span uk-icon="icon: cog; ratio: 4"></span>
					<h3 class="uk-card-title uk-margin">Setting Options</h3>
					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
				</div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
					<a class="uk-position-cover" href="#"></a>
					<span uk-icon="icon: code; ratio: 4"></span>
					<h3 class="uk-card-title uk-margin">Social Share</h3>
					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
				</div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
					<a class="uk-position-cover" href="#"></a>
					<span uk-icon="icon: settings; ratio: 4"></span>
					<h3 class="uk-card-title uk-margin">User Login</h3>
					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- CSS -->

<!-- JS -->