Build issue; Grid items

src/scss/app.scss

@@ -10,5 +10,6 @@
 @import 'components/icon';
 @import 'components/sidebar';
 @import 'components/lists';
+@import 'components/grid';
 @import 'components/header';
 

src/scss/components/_grid.scss

@@ -0,0 +1,37 @@
+
+.grid {
+
+	padding: 40px 20px;
+
+	.grid-item {
+		width: 16%;
+		margin: 0 2% 3%;
+		display: inline-block;
+		vertical-align: top;
+		border-bottom: 0;
+
+		.thumbnail {
+			max-width: 100%;
+		}
+
+		.name {
+			@include one_line_text;
+			padding-top: 8px;
+		}
+
+		.secondary {
+			@include one_line_text;
+			padding-top: 2px;
+			color: $secondary_grey;
+		}
+
+		&:nth-child(5)::after {
+			@include clear;
+		}
+
+		&:hover{
+			cursor: pointer;
+			opacity: 0.75;
+		}
+	}
+}

src/scss/components/_lists.scss

@@ -10,7 +10,7 @@
 
 	display: block;
 	position: relative;
-	padding: 8px 10px 8px 30px;
+	padding: 9px 10px 9px 40px;
 	border-top: 1px solid #EEEEEE;
 	border-bottom: 1px solid #EEEEEE;
 	margin-bottom: -1px;
@@ -22,9 +22,7 @@
 	}
 
 	&::after {
-		content: '';
-		clear: both;
-		display: block;
+		@include clear;
 	}
 
 	&.selected {
@@ -57,12 +55,13 @@
 
 		.select-state {
 			position: absolute;
-			top: 10px;
-			left: 10px;
+			top: 12px;
+			left: 15px;
+			font-size: 10px;
 		}
 
 		&.playing {
-			font-weight: 500;
+			font-weight: 600;
 		}
 	}
 

src/scss/components/_sidebar.scss

@@ -5,10 +5,11 @@ aside{
 	top: 0;
 	left: 0;
 	bottom: 0;
-	background: #333333;
+	background: #111111;
 	width: 200px;
 	overflow: hidden;
-
+	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
+	
 	.thumbnail {
 		position: absolute;
 		top: 0;
@@ -36,11 +37,11 @@ aside{
 
 			&.active {
 				border-color: $turquoise;
-				background: rgba( 0,0,0,0.1 );
+				background: rgba( 0, 0, 0, 0.5 );
 			}
 
 			&:hover {
-				background: rgba( 255,255,255,0.1 );
+				background: rgba( 255, 255, 255, 0.1 );
 			}
 		}
 
@@ -73,13 +74,13 @@ aside{
 			color: #FFFFFF;
 
 			.title {
-				@include one_line_text
+				@include one_line_text;
 			}
 
 			.artist-list {
 				opacity: 0.5;
 				display: block;
-				@include one_line_text
+				@include one_line_text;
 
 				.artist a {
 					color: inherit;

src/scss/global/_core.scss

@@ -27,4 +27,15 @@ main {
 		}
 	}
 
+	section {
+		padding: 40px;
+	}
+
+	h3 {
+		font-size: 14px;
+		margin-bottom: 14px;
+		padding-bottom: 4px;
+		border-bottom: 1px solid #000000;
+		text-transform: uppercase;
+	}
 }

src/scss/global/_variables.scss

@@ -1,8 +1,15 @@
 
 $turquoise: #08d58f;
+$secondary_grey: #888888;
 
 @mixin one_line_text {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+}
+
+@mixin clear {
+	content: '';
+	clear: both;
+	display: block;
 }