Using a @mixin to help with responsive

scale.scss

.feature {
	
	// Declare sizes that will be used to calculate different break points
	$height: 460px;
	$feature-image-width: 531px;
	$feature-image-height: 382px;
	$feature-right: 20px;
	$h1-size: 39px;
	$h2-size: 30px;
	
	// Set heights of everything using a relative percentage
	@mixin scale($perc: 1) {
		height: $height*$perc;
		h1 { font-size: $h1-size*$perc; }
		h2 { font-size: $h2-size*$perc;}
		.feature-image {
			width: $feature-image-width*$perc;
			height: $feature-image-height*$perc;
			right: $feature-right*$perc;
		}
	}
	
	// Set initial scale on largest breakpoint
	@include scale();

	// Common styles for the headings
	h1, h2 {
		@include webfont('light');
		width: 45%;
	}

	h1 {
		color: $light-blue;
		line-height: 1em;
		margin-bottom: .7em;
		margin-top: 20px;
	}

	h2 {
		color: #666666;
		line-height: 1.2em;
		margin-bottom: 1.1em;
	}

	@include respond-to(980px, down) {
		@include scale(.7);
		h1 { margin-top: 0px; }
	}
	
	@include respond-to($mobile-break, down) {
		@include scale(.6);
		h1 { margin-top: 20px; }
		.feature-image {
			top: 0px;
		}
	}
	
	@include respond-to(560px, down) {
		height: inherit;
		padding-bottom: 40px;
		h1, h2 { width: 80%; }
		.feature-image { display: none; }
	}

}