diff --git a/index.html b/index.html
index 71aeb42..5e92e76 100644
--- a/index.html
+++ b/index.html
@@ -16,33 +16,42 @@
 				margin: 0px auto;
 				background-color: #444444;
 			}
-			.grid-container { /* Default to single column for small screens */
-				display: grid;
-				grid-template-columns: auto;
-				grid-gap: 2px 2px;
-			}
-			@media only screen and (min-width: 640px){ /* Two columns for tablets */
-				.grid-container {
-					grid-template-columns: auto auto;
-				}
-			}
-			@media only screen and (min-width: 981px){ /* Three columns for large screens */
-				.grid-container {
-					grid-template-columns: auto auto auto;
-				}
-			}
 			.grid-item img {
+				display: inline-block;
 				width: 100%;
 			}
 			.title-wrapper{
 				text-align: center;
-				background-color: black;
+				background-color: #000000;
 			}
 			.item-title {
-				color: white;
-				font-size: 24px;
+				color: #ffffff;
+				font-size: 1.5em;
 				text-transform: uppercase;
 			}
+			.grid-container { /* Default to single column for small screens */
+				display: grid;
+				grid-template-columns: auto;
+				grid-gap: 0.2em 0.2em;
+			}
+			@media only screen and (min-width: 40em){ /* screens >640px wide*/
+				.grid-container {
+					grid-template-columns: auto auto;
+				}
+			}
+			@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
+				.grid-container {
+					grid-template-columns: auto auto auto;
+				}
+				.item-title {
+					font-size: 1.7em;
+				}
+			}
+			@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
+				.item-title {
+					font-size: 2.2em;
+				}
+			}
 		</style>
 		<script>
 			$(document).ready(function(){