Prepare checklist cards

index.html

@@ -34,15 +34,27 @@
 		<section>
 			<h1>Učitleský checklist</h1>
 			<p>Phasellus porta, velit sit amet varius laoreet, libero ex hendrerit diam, et commodo magna est non odio. Donec lacinia fringilla egestas. Nullam quis urna sit amet eros dignissim varius in non justo. In hac habitasse platea dictumst. Maecenas quis nisi mollis, fringilla justo et, eleifend purus. Donec convallis fringilla sem.</p>
-			<div class="checklist-cards">
+			<div class="checklist">
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 			</div>
 		</section>

sass/style.scss

@@ -45,6 +45,47 @@ section {
 
 /* Specific */
 
+.checklist {
+	display: flex;
+	gap: 1em;
+	overflow: scroll;
+	margin-top: 3em;
+	padding: 0 2em;
+
+	.card {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		width: 15em;
+		border: .15em solid $col-accent;
+		border-radius: 1em;
+		padding: 2em;
+		background-color: $col-bg;
+
+		img {
+			width: 100%;
+		}
+
+		.title {
+			position: relative;
+			font-weight: bold;
+			font-size: 1.138rem;
+			padding: 1em 0;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 25%;
+				height: 1px;
+				background-color: #fff;
+			}
+		}
+	}
+}
+
 .partners {
 	display: flex;
 	justify-content: center;