fix(guide): restructure curriculum guide articles (#36501)

* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions

guide/english/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md

@@ -1,7 +1,11 @@
 ---
 title: Create Reusable CSS with Mixins
 ---
-## Create Reusable CSS with Mixins
+# Create Reusable CSS with Mixins
+
+---
+## Problem Explanation
+
 `Mixin` is one of the great features that let developers use `SASS` instead of plain `CSS`, as it allows you to have a `Function` inside your Stylesheet!
 
 To create a mixin you should follow the following scheme:
@@ -17,17 +21,16 @@ element {
 }
 ```
 
----
+**Example:** Write A `Text Shadow` in `SASS`
 
-### [Example] Write A `Text Shadow` in `SASS`
 **Objective:** Apply a custom `Text Shadow` to an `h4` element
 
-#### HTML
+**HTML**
 ```html
 <h4>This text needs a Shadow!</h4>
-```
 
-#### SASS _(Written in SCSS syntax)_
+
+**SASS _(Written in SCSS syntax)_**
 ```scss
 @mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
     -webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;