optimize retrieve logic

public/assets/styles/base.css

@@ -19,19 +19,19 @@ body {
     font-size: 0.85rem;
 }
 
-h1 {
-    font-size: 1.49rem;
+h1,.h1 {
+    font-size: 1.75rem;
 }
 
-h2 {
-    font-size: 1.31rem;
+h2,.h2 {
+    font-size: 1.35rem;
 }
 
-h3 {
-    font-size: 1.13rem;
+h3,.h3 {
+    font-size: 1.35rem;
 }
 
-h4, h5, h6 {
+h4, h5, h6,.h4,.h5,.h6 {
     font-size: 0.95rem;
 }
 
@@ -414,4 +414,52 @@ span.think {
 .bubble img {
     max-width: 50px;
     max-height: 50px;
-}
+}
+
+/*####################################*/
+.example-1,
+.example-2 {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.example-1 .inner,
+.example-2 .inner {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+}
+.example-2 .inner {
+    margin: 2px;
+}
+.example-2::before {
+    content: "";
+    display: block;
+    background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(102, 102, 102, 0.75) 50%,
+            rgba(255, 255, 255, 0) 100%
+    );
+    height: 300px;
+    width: 100px;
+    transform: translate(0);
+    position: absolute;
+    animation: rotate 5s linear forwards infinite;
+    z-index: 0;
+    top: 50%;
+    transform-origin: top center;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}