diff --git a/asset/style.css b/asset/style.css
index 0cde275..c50ac49 100644
--- a/asset/style.css
+++ b/asset/style.css
@@ -122,7 +122,7 @@ body {
   clear: both;
 }
 
-.grid-item { 
+.grid-item, .grid-item--width2 { 
 	width: 350px;
 	margin-bottom: 20px;
 	border-radius: 3px;
@@ -133,6 +133,14 @@ body {
 	float:left;
 	box-sizing: border-box;
 }
+@media screen and (min-width: 886px) {
+	.grid-item--width2 { 
+		width: 720px;
+	}
+	/*html { 
+		background:#000; 
+	}*/
+}
 .grid-item:hover { 
 	background:#bbb;
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
diff --git a/logic/viewmasonry.js b/logic/viewmasonry.js
index 0d58d59..53e682a 100644
--- a/logic/viewmasonry.js
+++ b/logic/viewmasonry.js
@@ -8,6 +8,7 @@ function ViewMasonry()
   // SETTINGS
   this.statsNumTags = 5;
   this.statsNumTypes = 10;
+  this.doDoubleWide = true;
 
   // SETTINGS
   this.useMasonry = true;
@@ -54,7 +55,19 @@ function ViewMasonry()
   {
     let value = db[key];
 
-    let entry = `<div class="grid-item" id="${this.divNamePre + db[key].DIID}">`;
+    let itemClass = "grid-item";
+    if (this.doDoubleWide)
+    {
+      if (typeof value.QOTE !== 'undefined')
+      {
+        if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
+        {
+          itemClass = "grid-item grid-item--width2";
+        } 
+      }
+    }
+
+    let entry = `<div class="${itemClass}" id="${this.divNamePre + db[key].DIID}">`;
     entry += `<div class="title">${key.to_properCase()}</div>`;
 
     // LINK