style changes

assets/scss/base/list.scss

@@ -1,5 +1,8 @@
-.list {}
+.list {
+}
 .list-item {
+	@media (min-width: 600px) {font-size: 1.25em}
+	@media (min-width: 768px) {font-size: 1.5em}
 	display: block;
 	text-decoration: none;
 	color: inherit;
@@ -9,5 +12,5 @@
 	transition: 0.4s opacity ease-in-out;
 	&:hover {opacity: 0.4;}
 }
-.list-item__title {font-weight: 700;}
+.list-item__title {font-weight: 700; margin-bottom: 0.25em}
 .list-item__date {}

assets/scss/base/page.scss

@@ -1,5 +1,7 @@
 .page-title {
 	font-size: 1.5em;
+	@media (min-width: 600px) {font-size: 1.75em}
+	@media (min-width: 768px) {font-size: 2.25em}
 	font-weight: 700;
 }
 .page {

assets/scss/pages/index.scss

@@ -116,13 +116,15 @@
 	font-size: 1.25em;
 	line-height: 1.4;
 	display: flex;
-	justify-content: center;
 	align-items: center;
 }
 
 /* contact section */
 #contact {background: #eee;}
-#contact .container {display: flex; flex-flow: column; align-items: center;}
+#contact .container {
+	display: flex; flex-flow: column; align-items: center;
+	@media (min-width: 600px) {flex-flow: row-reverse; justify-content: space-between; gap: 2em}
+}
 #contact .section-header {max-width: 480px; text-align: center;}
 .h-card {
 	display: flex;

assets/scss/partials/i18n.scss

@@ -3,6 +3,7 @@ html[lang="ar"] {
 	.personal-summary,
 	.section-header,
 	.page-title,
+	.list-item,
 	.cta a
 	{direction: rtl;}
 	.cta a {margin-right: 0; margin-left: 1em;}