Enable checklist card scrolling

index.html

@@ -45,9 +45,11 @@
 			<h1>Obecné Zásady</h1>
 			<p class="narrow text-center">Ut vel mattis leo. Ut rutrum id urna eget congue. Vestibulum sed lobortis magna, eget hendrerit tortor. Nulla tempus viverra neque, in egestas quam aliquet eu. Curabitur tempor eros ac ante bibendum, quis hendrerit odio vehicula. Cras consectetur tellus sit amet ante semper, pharetra gravida nisl laoreet. Donec vel condimentum nisi. Aliquam lorem est, consequat eget diam et, sollicitudin tincidunt risus.</p>
 		</section>
-		<section class="wrap" id="checklist">
+		<section id="checklist">
+			<div class="wrap">
 				<h1>Učitelský checklist</h1>
 				<p class="narrow text-center">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>
 			<div class="checklist">
 				<div class="card" data-tilt>
 					<img src="static/img/pedf-logo-white.svg" alt="">

sass/style.scss

@@ -173,11 +173,14 @@ body.noscroll {
 
 .checklist {
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	gap: 1em;
-	overflow: visible;
+	margin-top: 2rem;
-	margin-top: 3em;
+	overflow-x: scroll;
-	padding: 0 2em;
+	scrollbar-width: none;
+
+	// `overflow-y: visible` does not work
+	padding: 1rem;
 
 	.card {
 		display: flex;
@@ -363,6 +366,10 @@ footer {
 			left: 0;
 		}
 	}
+
+	.checklist {
+		justify-content: center;
+	}
 }
 
 @media only screen and (max-width: $size-mobile) {