mobile responsiveness for blog items

css/style.css

@@ -1271,10 +1271,10 @@ footer > p {
         display: flex;
         flex-wrap: wrap;
 	align-items: center;
-	justify-content: center;
-	width: 100%;
+	justify-content: start;
+	width: 82rem;
 	padding: 0;
-	margin: 0;
+	margin: 0 auto;
 }
 
 .release-card {
@@ -1383,7 +1383,7 @@ width: 95%;
 .blog-post-item {
 	display: grid;
 	flex-direction: column;
-        height: 300px;
+    height: 300px;
 	align-items: center;
 	justify-content: center;
 	outline: .1rem solid rgba(12, 12, 12);
@@ -1393,6 +1393,7 @@ width: 95%;
 	background-color: rgba(40, 40, 40);
 	color: white;
 	padding: 1rem;
+	box-sizing: border-box;
 }
 
 .blog-post-item h2 {
@@ -1500,16 +1501,28 @@ width: 95%;
 }
 
 @media (max-width: 1024px) {
-	.blog-post-item {
-		width: 85%;
+	.section-default {
+		width: 95%;
 	}
+
 	.blog-post-item {
+		height: fit-content;
+		max-width: 100%;
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: column;
+		padding-top: 0;
+
 	}
-	.blog-post-item a{
-		width: max-content;
+	.blog-post-item a,
+	.blog-post-item p{
+		position: relative;
 	}
+
+	.blog-post-item h2 {
+		font-size: 1.75rem;
+		margin: 1rem;
+	}
+
 }
 
 @media (max-width: 1024px) {