Upload and test

00-Lesson-Site/frontend/src/components/Post/Blockquotes/QA.module.scss

@@ -0,0 +1,78 @@
+/* Path: src/components/Post/Blockquotes/QA.module.scss */
+
+.qaContainer {
+    // Use a yellowish tint to differentiate from Info block
+    background-color: #fff45e26;
+    padding: 30px;
+    border-radius: 10px;
+    position: relative;
+    min-height: 120px;
+    margin-bottom: 20px;
+
+    // --- Sticker Logic (Same as Info block) ---
+    .sticker {
+        position: absolute;
+        bottom: -10px;
+        right: -10px;
+        margin: 0;
+        width: 100px;
+        max-width: 30%;
+        // Rotate opposite way for variety
+        transform: rotate(-10deg);
+        pointer-events: none;
+
+        img {
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+        }
+    }
+
+    //Common prefix style (Q: and A:)
+    .prefix {
+        font-weight: 800;
+        color: #ffbd72; // Matches your H2 color scheme
+        margin-right: 12px;
+        display: inline-block;
+        min-width: 25px;
+    }
+
+    // --- Question Section ---
+    .questionHeader {
+        display: flex;
+        align-items: baseline;
+        margin-bottom: 20px;
+        font-size: 1.1em;
+        font-weight: 700;
+        // Ensure text doesn't hit the sticker
+        margin-right: 90px;
+        color: color-adjust(primary, 0, 0);
+    }
+
+    // --- Answer Section ---
+    .answerBody {
+        display: flex;
+        align-items: baseline;
+        // Ensure text doesn't hit the sticker
+        margin-right: 90px;
+    }
+
+    .answerContent {
+        flex: 1;
+        line-height: 1.6;
+
+        // Handle standard markdown elements inside the answer slot
+        p {
+            margin-bottom: 1em;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        ul,
+        ol {
+            margin-bottom: 1em;
+            padding-left: 20px;
+        }
+    }
+}