1 files changed, 45 insertions, 105 deletions
diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss
index bf8aada..f26b3fe 100644
--- a/src/components/organisms/layout/comment.module.scss
+++ b/src/components/organisms/layout/comment.module.scss
@@ -2,132 +2,72 @@
 @use "../../../styles/abstracts/mixins" as mix;
 @use "../../../styles/abstracts/placeholders";
 
-.wrapper {
-  padding: var(--spacing-md);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow:
-    fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light),
-    fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
-      var(--color-shadow);
-
-  &--comment {
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        display: grid;
-        grid-template-columns: minmax(0, #{fun.convert-px(150)}) minmax(0, 1fr);
-        column-gap: var(--spacing-lg);
-      }
-    }
-  }
-
-  &--form {
-    display: flex;
-    flex-flow: column wrap;
-    place-content: center;
-    margin-top: var(--spacing-sm);
-  }
-
-  .header {
-    display: flex;
-    flex-flow: column wrap;
-    align-items: center;
-    row-gap: var(--spacing-sm);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        grid-row: 1 / 4;
-      }
-    }
-  }
-
-  .author {
-    color: var(--color-primary-darker);
-    font-weight: 600;
-    text-align: center;
-  }
-
-  .avatar {
-    width: fun.convert-px(85);
-    height: fun.convert-px(85);
-    position: relative;
+.avatar {
+  img {
     border-radius: fun.convert-px(3);
     box-shadow:
       0 0 0 fun.convert-px(1) var(--color-shadow-light),
       fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1)
         var(--color-shadow);
-
-    img {
-      border-radius: fun.convert-px(3);
-    }
   }
+}
 
-  .date {
-    margin: var(--spacing-sm) 0;
-    font-size: var(--font-size-sm);
+.author {
+  color: var(--color-primary-darker);
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  text-align: center;
+  text-shadow: none;
+}
 
-    &__item {
-      justify-content: center;
-    }
+.body {
+  overflow-wrap: break-word;
 
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        margin: 0 0 var(--spacing-sm);
+  :global {
+    a {
+      @extend %link;
 
-        &__item {
-          justify-content: left;
-        }
+      &[hreflang],
+      &.download,
+      &.external {
+        @extend %link-with-icon;
       }
-    }
-  }
-
-  .body {
-    overflow-wrap: break-word;
-
-    :global {
-      a {
-        @extend %link;
 
-        &[hreflang],
-        &.download,
-        &.external {
-          @extend %link-with-icon;
-        }
-
-        &[hreflang] {
-          @extend %link-with-lang;
-        }
+      &[hreflang] {
+        @extend %link-with-lang;
+      }
 
-        &[hreflang]:not(.download, .external) {
-          --is-icon-hidden: "";
-        }
+      &[hreflang]:not(.download, .external) {
+        --is-icon-hidden: "";
+      }
 
-        &.download {
-          @extend %download-link;
-        }
+      &.download {
+        @extend %download-link;
+      }
 
-        &.external {
-          @extend %external-link;
-        }
+      &.external {
+        @extend %external-link;
+      }
 
-        &.download,
-        &.external {
-          &:not([hreflang]) {
-            --is-lang-hidden: "";
-          }
+      &.download,
+      &.external {
+        &:not([hreflang]) {
+          --is-lang-hidden: "";
         }
+      }
 
-        &.external.download {
-          @extend %external-download-link;
-        }
+      &.external.download {
+        @extend %external-download-link;
       }
     }
   }
+}
+
+.form {
+  margin-top: var(--spacing-sm);
 
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: var(--spacing-md) 0 0;
+  form > * {
+    margin-inline: auto;
   }
 }