hestiaHUGO: redesigned debugger console's Thumbnails rendering

Since the debugger console was redesigned, we should also re-design
its thumbnails rendering debugger as well. Let's make it nice and
fitting.

This patch redesigns debugger console's Thumbnails rendering in
hestiaHUGO/ directory.

Signed-off-by: (Holloway) Chew, Kean Ho <kean.ho.chew@zoralab.com>

hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/Init

@@ -189,8 +189,12 @@ specific language governing permissions and limitations under the License.
 		<div style='
 			grid-area: content;
 
+			box-sizing: border-box;
 			width: 100%;
-			overflow: auto;
+
+			margin: 15pt 0;
+
+			overflow-y: auto;
 
 			color: inherit;
 			background: transparent;

hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/_content

@@ -17,12 +17,93 @@ specific language governing permissions and limitations under the License.
 {{- /* INPUT PARAMETERS */ -}}
 {{- /* . = Page data in Hestia Structure */ -}}
 
-<p style='
-	font-family: var(--hestia-debugger-font-family);
-	font-size: 12pt;
-
-	color: var(--hestia-debugger-color);
-	background: transparent;
-'>
-	Placeholder text here
-</p>
+<div id='hestia-debug-console-thumbnails'>
+	<div style='
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-flow: row wrap;
+		gap: 10pt;
+
+		box-sizing: border-box;
+		width: 100%;
+
+		margin: 0;
+		padding: 0;
+
+		background: transparent;
+	'>
+		{{- range $i, $v := .Thumbnails }}
+		<div id='hestia-debug-console-thumbnails-{{- string $i -}}' style='
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+
+			box-sizing: border-box;
+
+			margin: 0;
+			padding: 5pt;
+
+			border: 2px solid var(--hestia-debugger-color);
+			background: rgba(255, 255, 255, .25);
+		'>
+			{{- range $j, $w := $v.Sources }}
+			<div style='
+				width: auto;
+				min-width: 100px;
+				height: auto;
+				min-height: 100px;
+
+				box-sizing: border-box;
+
+				margin: 0;
+				padding: 0;
+
+				background: transparent;
+			'>
+				<img alt='' src='{{- $w.URL -}}'
+					width='{{- $v.Width -}}' height='{{- $v.Height -}}'
+					loading='lazy'
+					style='
+						width: auto;
+						max-width: 100px;
+						height: auto;
+						max-height: 100px;
+
+						box-sizing: border-box;
+
+						margin: 0;
+						padding: 0;
+
+						background: transparent;
+				'/>
+				<p style='
+					margin: 0;
+					padding: 0;
+
+					text-align: center;
+
+					color: var(--hestia-debugger-color);
+					background: transparent;
+				'>
+					<code>.Sources.{{- string $j -}}</code>
+				</p>
+			</div>
+			{{- end }}
+
+			<h4 style='
+				margin: 3pt;
+				padding: 0;
+
+				text-align: center;
+
+				color: var(--hestia-debugger-color);
+				background: transparent;
+			'>
+				<b><code>.Thumbnails.{{- string $i -}}</code></b>
+			</h4>
+		</div>
+		{{- end }}
+	</div>
+</div>