• css
• hero.css

File contents

/* use backgrounds, not images */
#marketing_banners .banners .image,
#marketing_banners .pager .pager_item {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* layout changes */
#marketing_banners {
	height: 340px !important;
}
#marketing_banners .banners {
	left: 0;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	right: 110px;
	width: auto !important;
}
#marketing_banners .banners .banner {
	height: 100%;
}
#marketing_banners .banners .image {
	position: absolute;
	top: 0;
	right: 200px;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
}
#marketing_banners .banners div.copy {
	position: absolute !important;
	right: 0;
	bottom: 0 !important;
	width: 200px;
}
#marketing_banners .pager {
	position: absolute !important;
	right: 0;
	width: 110px !important;
}

#marketing_banners .pager .pager_item:last-child {
	border-bottom-width: 0;
}

#marketing_banners .banner .rights {
	background-color: transparent;
	bottom: 0;
	color: white;
	font-size: 75%;
	height: auto;
	left: 0;
	position: absolute;
	text-shadow: 0 1px 1px black;
	width: auto;
}
@media screen and (min-width: 980px) {
	#marketing_banners .banners .image {
		right: 260px;
	}
	#marketing_banners .banners div.copy {
		width: 260px !important;
	}
	#marketing_banners .banners div.copy h2 {
		font-size: 30px;
		line-height: 40px;
		margin: 25px;
	}
	#marketing_banners .banners div.copy p {
		line-height: 1.618;
		margin: 25px;
	}
}
@media screen and (max-width: 767px) {
	#marketing_banners .banners .image {
		right: 0;
		bottom: 80px;
	}
	#marketing_banners .banners div.copy {
		height: 80px !important;
		width: auto;
		left: 0;
		padding: 5px;
	}
	#marketing_banners .banner div.copy p {
		display: block;
		margin: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}