shuffling the issues to match the wave

index.html

@@ -20,7 +20,7 @@
 			</p>
 		</section>							
 
-		<!-- max. width of image is 540px -->
+		<!-- max. width of an image is 540px -->
 
 		<section id="issues">
 
@@ -44,7 +44,6 @@
 					<div class="issue-text"></div>
 				</a>
 			</div>
-
 			<div id="special-issue-13" class="issue" data-cycle="3">
 				<a href="13/index.html">
 					<div class="issue-nr">Special<br> Issue 13</div>

stylesheet.css

@@ -35,9 +35,10 @@ div#wrapping{
 /* SECTION: SPECIAL ISSUES */
 
 section#issues{
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(3, calc(33.3% - 42px));
+	grid-template-rows: repeat(3, 1fr);	
+	grid-auto-flow: column;
 	font-size: 14px;
 	line-height: 20px;
 }
@@ -133,6 +134,12 @@ section#info.endpoint{
 	font-family: monospace;
 	font-size: 14px;
 	line-height: 1.9;
+}
+section#intro.endpoint{
+	margin-bottom: 100px;
+}
+section#info.endpoint{
+	margin-top: 100px;
 }
 	section#intro h1,
 	section#info h1{
@@ -173,32 +180,36 @@ section#info.endpoint{
 /* GENERAL ELEMENTS */
 
 section#issues .issue{
-	flex: 3 3 auto;
-	display: inline-block;
-	width: calc(33.3% - 42px);
-	vertical-align: top;
-	margin: 0 0 80px;
+	margin: 0;
 	padding: 2em 15px;
 	color: rgb(40,40,40);
 }
 section#issues .issue[data-cycle='1']{
 	margin-top:0 !important;
+	grid-column: 1;
 }
 section#issues .issue[data-cycle='2']{
 	margin-top: 200px !important;
+	grid-column: 2;
 }
 section#issues .issue[data-cycle='3']{
 	margin-top: 400px !important;
+	grid-column: 3;
 }
-section#issues .issue[data-cycle='4']{
+section#issues .issue[data-cycle='6']{
 	margin-top: 400px !important;
+	grid-column: 1;
 }
 section#issues .issue[data-cycle='5']{
 	margin-top: 200px !important;
+	grid-column: 2;
 }
-section#issues .issue[data-cycle='6']{
+section#issues .issue[data-cycle='4']{
 	margin-top: 0 !important;
+	grid-column: 3;
 }
+
+
 section#issues .issue-title, 
 section#issues .issue-nr{
 	font-size: 275%;