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,16 +157,28 @@ body.noscroll {
 	}
 
 	section {
-		max-width: 65%;
+		display: grid;
-		margin: 0 auto;
+		grid-template-columns: 1fr;
-		text-align: center;
 
-		.title {
+		.text {
-			font-weight: bold;
+			max-width: 30rem;
-			font-size: 1.953rem;
+			margin: 0 auto;
+			text-align: center;
+
+			.title {
+				font-weight: bold;
+				font-size: 1.953rem;
+			}
+
+			p {
+				font-size: 1.25rem;
+			}
 		}
-		p {
+
-			font-size: 1.25rem;
+		.video-list {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
 		}
 	}
 }
@@ -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 {