about first part

app/assets/scss/modules/_headline.scss

@@ -1,6 +1,10 @@
 .headline{
 	margin:auto;
 
+	&--l-margin{
+		margin-left: 55px;
+	}
+
 	&--s-width {
 		max-width: 500px;
 

app/assets/scss/modules/_icon.scss

@@ -0,0 +1,7 @@
+.icon{
+	
+	&--foodcoop{
+		width: 255px;
+		margin-left: 60px;
+	}
+}

app/assets/scss/modules/_page-section.scss

@@ -61,9 +61,17 @@
 		left: 50%;
 		transform: translateX(-50%);
 
+		@include atSmall{
+			position: relative;
+			top: -10px;
+			margin: auto;
+			left: 0;
+			transform: translateX(0%);
+		}
+
 		@include atMedium{
 			position: relative;
-			top: 70px;
+			top: 20px;
 			margin: auto;
 			left: 0;
 			transform: translateX(0%);

app/assets/scss/modules/_rows.scss

@@ -40,6 +40,11 @@
 		margin-bottom: 0rem;
 		}
 
+		&__medium-3--larger {
+			float: left;
+			width: 30%;
+		}
+
 		&__medium-4 {
 			float: left;
 			width: 33.33%;
@@ -63,6 +68,11 @@
 			width: 63%;
 		}
 
+		&__medium-9--smaller {
+			float: right;
+			width: 70%;
+		}
+
 	}
 	
 	/* Begin Equal Height Rules */

app/assets/scss/modules/_video-container.scss

@@ -1,21 +1,29 @@
 .video-container {
 	position:relative;
-	padding-bottom:56.25%;
+	padding-bottom:61.15%;
-	padding-top:30px;
 	height:0;
 	overflow:hidden;
 	box-shadow: -3px 3px 10px #000000ba;
-	margin-bottom: 15px;
 	margin-right: -18px;
 	margin-left: -18px;
 
+	@include atSmall{
+		padding-bottom:60%;
+	}
+
+	@include atMedium{
+		padding-bottom:59%;
+	}
+
+
 	@include atLarge{
+	padding-bottom:56.25%;
 	margin-right: 0px;
 	margin-left: 0px;
 	}
 }
 
-.video-container iframe, .video-container object, .video-container embed {
+.video-container video{
 	position:absolute;
 	top:0;
 	left:0;

app/assets/scss/modules/_wrapper.scss

@@ -9,4 +9,8 @@
 	&--medium{
 		max-width: 976px;
 	}
+
+	&--t-margins{
+		margin-top: 100px;
+	}
 }

app/assets/scss/style.scss

@@ -13,4 +13,5 @@
 @import './modules/_rows';
 @import './modules/_generic-content-container';
 @import './modules/_video-container';
+@import './modules/_icon';
 

app/index.html

@@ -76,7 +76,10 @@
 			<div class="row row--gutters">
         		<div class="row__medium-8 row__medium-8--smaller">
         			<div class="video-container">
-						<iframe class="content--video--right" width="560" height="315" src="https://www.youtube-nocookie.com/embed/XnC3sBJRwv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+						<video class="content--video--right" width="560" height="315" controls>
+							<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
+							Your browser does not support the video tag.
+						</video>
 					</div>
 				</div>
 				<div class="row__medium-4 row__medium-4--larger">
@@ -93,20 +96,23 @@
 
 	<!-- HOW IT WORKS -->
 	<div id="how-it-works" class="page-section page-section--darkGreen">
-			<div class="wrapper">
+		<div class="wrapper wrapper--t-margins">
-				<div class="headline headline--s-width headline--centered headline--b-margin">
+			<div class="row">
-					<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
+        		<div class="row__medium-9 row__medium-9--smaller">
-					<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
+        			<div class="headline headline--l-margin">
+						<h2 class="headline__title ">What is a foodcoop?</h2>
+						<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
+					</div>
+				</div>
+				<div class="row__medium-3 row__medium-3--larger">
+					<img class="icon icon--foodcoop" src="./assets/media/images/foodcoop.png">
+				</div>
 			</div>
 		</div>
 	</div>
 
 	<div id="how-it-works-2" class="page-section page-section--lightGreen">
 		<div class="wrapper">
-				<div class="headline headline--s-width headline--centered headline--b-margin">
-					<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
-					<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
-				</div>
 		</div>
 	</div>
 

app/temp/styles/style.css

@@ -567,6 +567,8 @@ img {
   margin-right: auto; }
   .wrapper--medium {
     max-width: 976px; }
+  .wrapper--t-margins {
+    margin-top: 100px; }
 
 .page-section {
   padding: 1.2rem 0;
@@ -599,16 +601,25 @@ img {
     bottom: -60px;
     left: 50%;
     transform: translateX(-50%); }
+    @media (min-width: 530px) {
+      .page-section--arrow-down {
+        position: relative;
+        top: -10px;
+        margin: auto;
+        left: 0;
+        transform: translateX(0%); } }
     @media (min-width: 800px) {
       .page-section--arrow-down {
         position: relative;
-        top: 70px;
+        top: 20px;
         margin: auto;
         left: 0;
         transform: translateX(0%); } }
 
 .headline {
   margin: auto; }
+  .headline--l-margin {
+    margin-left: 55px; }
   .headline--s-width {
     max-width: 500px; }
     @media (min-width: 800px) {
@@ -665,6 +676,9 @@ img {
   @media (min-width: 1200px) {
     .row__b-margin-until-medium {
       margin-bottom: 0rem; }
+    .row__medium-3--larger {
+      float: left;
+      width: 30%; }
     .row__medium-4 {
       float: left;
       width: 33.33%; }
@@ -677,7 +691,10 @@ img {
       float: right;
       width: 66.66%; }
     .row__medium-8--smaller {
-      width: 63%; } }
+      width: 63%; }
+    .row__medium-9--smaller {
+      float: right;
+      width: 70%; } }
   @media (min-width: 800px) {
     .flexbox .row--equal-height-at-medium {
       display: flex; } }
@@ -717,24 +734,33 @@ img {
 
 .video-container {
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: 61.15%;
-  padding-top: 30px;
   height: 0;
   overflow: hidden;
   box-shadow: -3px 3px 10px #000000ba;
-  margin-bottom: 15px;
   margin-right: -18px;
   margin-left: -18px; }
+  @media (min-width: 530px) {
+    .video-container {
+      padding-bottom: 60%; } }
+  @media (min-width: 800px) {
+    .video-container {
+      padding-bottom: 59%; } }
   @media (min-width: 1200px) {
     .video-container {
+      padding-bottom: 56.25%;
       margin-right: 0px;
       margin-left: 0px; } }
 
-.video-container iframe, .video-container object, .video-container embed {
+.video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; }
 
+.icon--foodcoop {
+  width: 255px;
+  margin-left: 60px; }
+
 /*# sourceMappingURL=style.css.map */