About fix, blog redesign

src/layouts/blogSection.astro

@@ -8,12 +8,43 @@ const { title } = Astro.props
 
 <section>
   <h1>{title}</h1>
-  <div>
+  <div class="holder">
+    <div class="line"></div>
     <slot />
+    <div class="circle"></div>
   </div>
 </section>
 
 <style>
+  .circle {
+    display: flex;
+    position: absolute;
+    visibility: visible;
+    left: 0;
+    right: 0;
+    bottom: -20%;
+    margin-left: auto;
+    margin-right: auto;
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 0% 50% 50% 50%;
+    transform: rotate(45deg);
+    background-color: var(--c-darkpurple);
+  }
+  .line {
+    display: flex;
+    position: absolute;
+    visibility: visible;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: var(--c-darkpurple);
+    height: 120%;
+    translate: 0% 7.5%;
+    width: 0.25rem;
+    z-index: -1;
+  }
   h1 {
     color: white;
     margin: 0.5rem 0px 0.5rem 0.5em;
@@ -21,9 +52,10 @@ const { title } = Astro.props
     width: max-content;
     background-color: var(--c-darkgray);
   }
-  div {
+  .holder {
+    margin: 2rem 3rem 0.5rem 3rem;
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column wrap;
     row-gap: 1em;
     column-gap: 1em;
     align-self: center;
@@ -32,10 +64,18 @@ const { title } = Astro.props
     padding: 1em;
     color: white;
     font-size: 1em;
+    position: relative;
   }
   @media (min-width: 512px) {
-    div {
-      justify-content: left;
+  }
+  @media (min-width: 1500px) {
+    .holder {
+      margin-left: 15rem;
+      margin-right: 15rem;
+    }
+    h1 {
+      margin-left: 15rem;
+      margin-right: 15rem;
     }
   }
 </style>