Prepare responsive layout for video section

index.html

@@ -29,13 +29,27 @@
 				</div>
 			</header>
 
-			<section>
+			<section class="wrap">
-				<div>
+				<div class="text">
 					<div class="title">To, co se děje u&nbsp;nich doma, nevidíte&nbsp;&hellip;</div>
 					<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
 				</div>
-				<div class="videos">
+				<div class="player">
-					videos
+					player
+				</div>
+				<div class="video-list">
+					<div class="item">
+						.
+					</div>
+					<div class="item">
+						.
+					</div>
+					<div class="item">
+						.
+					</div>
+				</div>
+				<div class="button">
+					button
 				</div>
 			</section>
 		</div>

sass/style.scss

@@ -157,7 +157,11 @@ body.noscroll {
 	}
 
 	section {
-		max-width: 65%;
+		display: grid;
+		grid-template-columns: 1fr;
+
+		.text {
+			max-width: 30rem;
 			margin: 0 auto;
 			text-align: center;
 
@@ -165,10 +169,18 @@ body.noscroll {
 				font-weight: bold;
 				font-size: 1.953rem;
 			}
+
 			p {
 				font-size: 1.25rem;
 			}
 		}
+
+		.video-list {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
+		}
+	}
 }
 
 .checklist {
@@ -359,6 +371,19 @@ footer {
 }
 
 @media only screen and (min-width: $size-mobile) {
+
+	.intro section {
+		grid-template-columns: 1fr 1fr;
+
+		.video-list {
+			grid-column: 2;
+		}
+
+		.button {
+			grid-column: 1;
+		}
+	}
+
 	.faq-list .faq {
 		&:before,
 		&:last-child:after {