Add videos and intro layout

index.html

@@ -35,22 +35,16 @@
 					<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
 				</div>
 				<div class="player">
-					player
+					<video>
+						<source src="/static/vid/pestouni.mp4" type="video/mp4">
+					</video>
 				</div>
 				<div class="video-list">
-					<div class="item">
+					<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active">
-						.
+					<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4">
-					</div>
+					<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4">
-					<div class="item">
-						.
-					</div>
-					<div class="item">
-						.
-					</div>
-				</div>
-				<div class="button">
-					button
 				</div>
+				<a href="" class="button">Vyhledat pomoc</a>
 			</section>
 		</div>
 		<section>

sass/style.scss

@@ -159,9 +159,12 @@ body.noscroll {
 	section {
 		display: grid;
 		grid-template-columns: 1fr;
+		grid-column-gap: 2rem;
+		grid-row-gap: 2rem;
+		align-items: center;
 
 		.text {
-			max-width: 30rem;
+			max-width: 25rem;
 			margin: 0 auto;
 			text-align: center;
 
@@ -175,10 +178,52 @@ body.noscroll {
 			}
 		}
 
+		.player {
+
+			video {
+				width: 100%;
+				border-radius: 2rem;
+			}
+		}
+
 		.video-list {
 			display: flex;
 			justify-content: center;
+			flex-wrap: wrap;
 			gap: 1rem;
+
+			img {
+				display: block;
+				border-radius: 1rem;
+				cursor: pointer;
+				flex: 1;
+				max-width: 12rem;
+				width: 100%;
+
+				&.active {
+					outline: .15rem solid $col-accent;
+				}
+			}
+		}
+
+		.button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			text-decoration: none;
+			font-size: 1.25rem;
+			font-weight: bold;
+			border-radius: 2.5rem;
+			height: 5rem;
+			width: 100%;
+			max-width: 80%;
+			margin: 0 auto;
+			border: .15rem solid $col-accent;
+
+			&:hover {
+				background-color: $col-accent;
+			}
 		}
 	}
 }
@@ -373,14 +418,25 @@ footer {
 @media only screen and (min-width: $size-mobile) {
 
 	.intro section {
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 2fr 3fr;
+
+		.text {
+			text-align: left;
+			line-height: 1.25;
+			margin: 0; // Disable centering
+
+			.title {
+				font-size: 2.5rem;
+			}
+		}
 
 		.video-list {
-			grid-column: 2;
+			order: 4;
 		}
 
 		.button {
-			grid-column: 1;
+			margin: 0 auto 0 0; // Align left
+			max-width: 70%;
 		}
 	}