gistfile1.txt

<div class="cars-search-result__container">

	<div class="cars-search-result__summary">
		<p>Results Found <span class="cars-search__summary-count"></span></p>
		<span>/</span>
		<a class="cars-search-result__clear" href="javascript:;">Clear Filters</a>
	</div>

	<div class="cars-search-result">
		<span class="cars-search-result__distance">0.5 miles</span>
		<div class="cars-search-result__banner">
			<img src="http://placehold.it/350x160">
		</div>
		<p class="cars-search-result__deals"><a href="" class="cars-search-result__deals-link">See These Deals</a></p>
		<div class="cars-search-result__details">
			<p class="cars-search-result__detail--header">Herb Chambers Honda of Boston</p>

			<p class="cars-search-result__detail cars-search-result__detail--number"><span class="bdc-icon bdc-icon--phone-red-small"></span>(855) 638-9667</p>
			<p class="cars-search-result__detail cars-search-result__detail--email"><span class="bdc-icon bdc-icon--website-red-small"></span><a href="javascript:;">www.herbchambershondaboston.com<a/></p>
			<p class="cars-search-result__detail cars-search-result__detail--address"><span class="bdc-icon bdc-icon--pin-red-small"></span><a href="javascript:;">1186 Commonwealth Avenue, Boston, MA 02143</a></p>
		</div>
	</div>

	<div class="cars-search-result__more-results">
		<p>View More Results</p>
		<span class="bdc-icon bdc-icon--arrow-red-small"></span>
	</div>

</div>


$module-name: 'cars-search-result';

.#{$module-name} {
	width: 100%;
    padding: 15px 15px 0 15px;
    position: relative;
    margin: 0 auto;

    &__container {
    	width: 100%;
    }

	&__banner {
		width: 100%;
		background-color: lightgray;
		overflow: hidden;

		img {
			width: 100%;
		}
	}

	&__distance {
		position: absolute;
	    right: 15px;
	    padding: 4px 8px;
	    font-size: 12px;
	    background-color: white;
	    color: #9B1C20;
	    text-transform: uppercase;
	}

	&__deals {
		width: 100%;
	    padding: 10px;
	    text-align: center;
	    background: #9B1C20;
	    color: white;
	    font-size: 16px;

	    a {
	    	color: white;
	    	text-decoration: underline;
	    }

	    a:hover {
	    	color: lightgrey;
	    }
	}

	&__details {
		padding: 10px 15px;
    	background-color: lightgray;
	}

	&__detail {
		padding: 5px 0 0 15px;
    	font-size: 12px;
    	position: relative;

		&--header {
			padding: 0 5px 5px 0;
			color: #9B1C20;
			font-size: 14px;
		}

		&--address {
			height: 35px;
		}

		span {
			margin-right: 5px;
		    position: absolute;
		    left: 0;
		}

		a {
			color: black;
		}

		a:hover {
	    	color: #9B1C20;
	    }
	}

	&__more-results {
		// display: none;
		padding: 5px;
    	width: 100%;
		font-size: 16px;
		color: grey;
		font-weight: 700;
		text-align: center;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		display: inline-block;
		
		p {
			display: inline-block;
			margin-right: 5px;
		}

		p:hover {
			color: #9B1C20;
			cursor: pointer;
		}
	}

	&__summary {
		// display: none;
		margin: 0px 15px 0;
		padding-top: 15px;
		font-size: 14px;
		font-weight: 700;

		p {
			display: inline-block;
		}

		span {
			color: lightgrey;
		}

		a {
			color: #9B1C20;
			text-decoration: underline;
			font-weight: 400;
		}
	}
}

// ------------------------------------------------------------
// Tablet Breakpoint
// ------------------------------------------------------------

@include media-query(tablet) {
	.#{$module-name} {
		width: 50%;
		float: left;

    	&__container {
    		margin: 0 auto;
			overflow: auto;
    	}
	}
}

// ------------------------------------------------------------
// Desktop Breakpoint
// ------------------------------------------------------------

@include media-query(desktop) {
	.#{$module-name} {
		width: 31%;
	    margin: 0 3.5% 25px 0;
	    padding: 0;

	    &__distance {
	    	right: 0;
	    }
		
		&__summary {
			margin: 0 0 15px;
		}

		&:nth-of-type(3n+4) {
    		margin-right: 0;
		}
	}
}