New contact list in footer

index.html

@@ -442,17 +442,24 @@
 		</section>
 
 		<footer>
-			<div class="grid wrap narrow">
+			<div class="wrap narrow">
+				<div class="contact-list">
+					<div>
+						<p><strong>Kontakt pro média</strong></p>
+						Ondřej Balada<br>
+						<a href="tel:+420777954775">+420 777 954 775</a><br>
+						<a href="mailto:ondrej.balada@pedf.cuni.cz">ondrej.balada@pedf.cuni.cz</a>
+					</div>
+					<div>
+						<p><strong>Kontakt pro obecné dotazy </strong></p>
+						<p><a href="mailto:domunevidis@pedf.cuni.cz">domunevidis@pedf.cuni.cz</a></p>
+						<p class="small">E-mail není určen pro odborné dotazy a žádosti o konzultaci konkrétních situací. V těchto případech se prosím obraťte na organizace uvedené výše.</p>
+					</div>
+				</div>
 				<div>
 					<p>&copy; 2023 Domů nevidíš</p>
 					<p>Projekt Pedagogické fakulty Univerzity Karlovy ve spolupráci s&nbsp;Barevný svět dětí, z.s.</p>
 				</div>
-				<div>
-					<p><strong>Kontakt pro média</strong></p>
-					Ondřej Balada<br>
-					<a href="tel:+420777954775">+420 777 954 775</a><br>
-					<a href="mailto:ondrej.balada@pedf.cuni.cz">ondrej.balada@pedf.cuni.cz</a>
-				</div>
 			</div>
 		</footer>
 

sass/style.scss

@@ -871,6 +871,9 @@ body.noscroll {
 
 footer {
 	$logo-radius: 4.5em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	position: relative;
 	text-align: center;
 	font-size: 1.138rem;
@@ -896,13 +899,6 @@ footer {
 		background-color: $col-bg;
 	}
 
-	.grid {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-row-gap: 2em;
-		grid-column-gap: 2em;
-	}
-
 	a {
 		color: inherit;
 		text-decoration: none;
@@ -911,6 +907,23 @@ footer {
 			color: lighten($col-accent, 25%);
 		}
 	}
+
+	.contact-list {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2em;
+		margin-bottom: 3em;
+
+		div {
+			width: 100%;
+			max-width: 15rem;
+		}
+
+		.small {
+			font-size: .75em;
+		}
+	}
 }
 
 @media only screen and (min-width: $size-mobile) {
@@ -1021,8 +1034,11 @@ footer {
 		background-position: 170% center;
 	}
 	
-	footer .grid {
+	footer .contact-list {
-		grid-template-columns: 3fr 2fr;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: center;
+		gap: 5em;
 	}
 }