Large Main

HTML Structure

<div id="homeNewsWrapper" class="largeMain row">
	<a href="" class="newsItem main">
		<div class="inside">
				<div class="image">
					<div class="inside">
						<img src="theme/news/news1.jpg" alt="" />
					</div>
				</div>
			</div>
			<div class="newsContent">
				<div class="inside-padding">
					<div>
						<h3>Article Title</h3>
					</div>
					<div class="newsDate">
						<span>20 December 2017</span>
					</div>
					<div class="newsSummary">
						<p>Short article summary...</p>
					</div>
					<div class="readMore">
						<span>Read this article</span>
						<span class="offscreen">Read More About<span>
					</div>
				</div>
			</div>
		</div>
	</a>
	<div class="secondaryNewsItems">
		<div class="inside">
			<a href="" class="newsItem secondary">
				<div class="image">
					<div class="inside">
						<img src="theme/news/news2.jpg" alt="" />
					</div>
				</div>
				<div class="newsContent">
					<div>
						<div class="newsTitle">
							<h3>Article Title</h3>
						</div>
						<div class="newsDate">
						<div class="date">
								<span>20 December 2017</span>
						</div>
						</div>
						<div class="newsSummary">
								<p>Short article summary...</p>
						</div>
						<div class="readMore">
								<span>Read this article</span>
								<span class="offscreen">Read more about (insert title here)</span>
						</div>
				</div>
			</div>
		</a>
		<!-- End secondary -->
		<!-- Copy/paste a.secondary and contents for more news items of the same type -->
	</div>
	</div>