diff --git a/frontend/sass/commento-card.scss b/frontend/sass/commento-card.scss
index e884100..6c87570 100644
--- a/frontend/sass/commento-card.scss
+++ b/frontend/sass/commento-card.scss
@@ -1,3 +1,5 @@
+@import "colors-main.scss";
+
 .commento-card {
   @import "commento-options.scss"; // SVG buttons to the right of each comment
 
@@ -91,3 +93,34 @@
     height: 48px;
   }
 }
+
+.commento-dark-card {
+  background: $yellow-0;
+}
+
+// do not place this inside .commento-card as this is used by logged-container
+// as well
+.commento-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 22px;
+  float: left;
+  margin-right: 10px;
+  border: 0px transparent;
+}
+
+.commento-avatar-img {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-right: 10px;
+}
diff --git a/frontend/sass/commento.scss b/frontend/sass/commento.scss
index 1f88f4a..3afb744 100644
--- a/frontend/sass/commento.scss
+++ b/frontend/sass/commento.scss
@@ -56,33 +56,4 @@
     font-weight: 700;
     margin-top: 16px;
   }
-
-  .commento-dark-card {
-    background: $yellow-0;
-  }
-
-  .commento-avatar {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    font-size: 22px;
-    float: left;
-    margin-right: 10px;
-    border: 0px transparent;
-  }
-
-  .commento-avatar-img {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    float: left;
-    margin-right: 10px;
-  }
 }