scapegoat/Docs2.git

			@@ -54,15 +54,11 @@
			}

			& > #search-space {
			width: 50%;
			width: 65%;
			margin-top: 12vh;
			margin-left: auto;
			margin-right: auto;

			@media all and (max-width: $fullPageWidth) {
			width: 90%;
			}

			& > * {
			width: 100%;
			border-radius: 5px;
			@@ -89,17 +85,35 @@
			& > #search-layout {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			opacity: 0;
			visibility: hidden;
			border: 1px solid var(--lightgray);

			& > * {
			height: calc(75vh - 20em);
			background: none;
			border-radius: 5px;
			border: 1px solid var(--lightgray); // Border to define the box
			@media all and (min-width: $tabletBreakpoint) {
			&[data-preview] {
			& .result-card > p.preview {
			display: none;
			}
			}
			}

			@media all and (max-width: $mobileBreakpoint) {
			& > div {
			// vh - #search-space.margin-top
			height: calc(75vh - 12vh);
			background: none;

			&:first-child {
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-right: 1px solid var(--lightgray);
			}

			&:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			}
			}

			@media all and (max-width: $tabletBreakpoint) {
			display: block;
			& > *:not(#results-container) {
			display: none !important;
			@@ -111,27 +125,38 @@
			}
			}

			& .highlight {
			background: color-mix(in srgb, var(--tertiary) 60%, transparent);
			border-radius: 5px;
			}

			& > #preview-container {
			display: block;
			box-sizing: border-box;
			overflow: hidden;

			& .preview-inner {
			margin: 0 auto;
			padding: 1em;
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			overflow-y: auto;
			font-family: inherit;
			font-size: 1.1em;
			color: var(--dark);
			line-height: 1.5em;
			font-weight: 400;
			background: var(--light);
			border-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			box-shadow:
			0 14px 50px rgba(27, 33, 48, 0.12),
			0 10px 30px rgba(27, 33, 48, 0.16);
			}

			a.internal {
			background-color: none;
			}
			}

			& > #results-container {
			@@ -141,6 +166,7 @@
			padding: 1em;
			cursor: pointer;
			transition: background 0.2s ease;
			border-bottom: 1px solid var(--lightgray);
			width: 100%;
			display: block;
			box-sizing: border-box;
			@@ -156,12 +182,6 @@
			outline: none;
			font-weight: inherit;

			& .highlight {
			color: var(--secondary);
			font-weight: 700;
			}

			&:hover,
			&:focus,
			&.focus {
			background: var(--lightgray);
			@@ -171,41 +191,23 @@
			margin: 0;
			}

			& > ul > li {
			margin: 0;
			display: inline-block;
			white-space: nowrap;
			margin: 0;
			overflow-wrap: normal;
			}

			& > ul {
			list-style: none;
			display: flex;
			padding-left: 0;
			gap: 0.4rem;
			margin: 0;
			& > ul.tags {
			margin-top: 0.45rem;
			box-sizing: border-box;
			overflow: hidden;
			background-clip: border-box;
			margin-bottom: 0;
			}

			& > ul > li > p {
			border-radius: 8px;
			background-color: var(--highlight);
			overflow: hidden;
			background-clip: border-box;
			padding: 0.03rem 0.4rem;
			margin: 0;
			color: var(--secondary);
			opacity: 0.85;
			}

			& > ul > li > .match-tag {
			color: var(--tertiary);
			padding: 0.2rem 0.4rem;
			margin: 0 0.1rem;
			line-height: 1.4rem;
			font-weight: bold;
			opacity: 1;
			color: var(--secondary);

			&.match-tag {
			color: var(--tertiary);
			}
			}

			& > p {