Harmonize comment CSS

src/components/projectMediaLink.vue

@@ -53,7 +53,9 @@ export default {
 			class="clickable"
 		/>
 		<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
-		<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
+		<div v-if="options.comment && type == 'post'" class="comment">
+			<p>{{ options.comment }}</p>
+		</div>
 	</a>
 	<div style="display:none">
 		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">

src/styles/_page.project.feed.scss

@@ -109,20 +109,39 @@
 				}
 			}
 
-			.comment {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 100%;
-				margin: 0;
-				padding: var.$elem-spacing;
-				line-height: normal;
-				box-sizing: border-box;
-				border-radius: 0 0 var.$block-radius var.$block-radius;
-				transition: opacity 0.3s;
-				cursor: auto;
-				font-size: 0.9em;
+			.drill {
+				&:hover .comment {
+					opacity: 0.3;
+				}
+
+				.comment {
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					width: 100%;
+					margin: 0;
+					padding: var.$elem-spacing;
+					line-height: normal;
+					box-sizing: border-box;
+					border-radius: 0 0 var.$block-radius var.$block-radius;
+					transition: opacity 0.3s;
+					cursor: auto;
+					font-size: 0.9em;
+
+					&:hover {
+						opacity: 1;
+					}
+
+					p {
+						margin: 0;
+					}
+
+					p + p {
+						margin-top: var.$elem-spacing;
+					}
+				}
 			}
+			
 
 			&.message {
 				background: color.$message-bg;
@@ -152,24 +171,10 @@
 						.drill-hover-icon {
 							color: color.$message-flashy;
 						}
-						.comment {
-							opacity: 0.3;
-						}
 					}
 
 					.comment {
 						background: color.$message-bg-light;
-
-						&:hover {
-							opacity: 1;
-						}
-						p {
-							margin: 0;
-						}
-
-						p + p {
-							margin-top: var.$elem-spacing;
-						}
 					}
 				}
 
@@ -272,10 +277,6 @@
 										filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 									}
 								}
-
-								.comment {
-									opacity: 0;
-								}
 							}
 						}