style: added image-header CSS component; style: removed stackedTabs and middle section SCSS files

src/components/TheContent.vue

@@ -31,11 +31,23 @@
 </template>
 
 <style lang="scss">
+@import '../styles/scss/base/_variables.scss';
+// src/components/TheContent.vue
 #container {
+	--container-width: 95%;
+
 	margin: 0 auto;
 	max-width: 1280px;
 	width: var(--container-width);
 	transform: scale(1);
+
+	@media only screen and (min-width: $small) {
+		--container-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--container-width: 70%;
+	}
 }
 
 main {

src/components/globals/TheQualityModal.vue

@@ -22,7 +22,9 @@
 		</div>
 	</div>
 </template>
-<style>
+<style lang="scss">
+@import '../../styles/scss/base/_variables.scss';
+
 .smallmodal {
 	position: fixed;
 	z-index: 1250;
@@ -36,12 +38,22 @@
 }
 
 .smallmodal-content {
+	--modal-content-width: 95%;
+
 	background-color: transparent;
 	margin: auto;
 	width: var(--modal-content-width);
 	position: relative;
 	top: 50%;
 	transform: translateY(-50%);
+
+	@media only screen and (min-width: $small) {
+		--modal-content-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--modal-content-width: 70%;
+	}
 }
 
 .smallmodal-content button {

src/components/pages/Artist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="artist_tab" class="relative image_header" ref="root">
+	<div id="artist_tab" class="relative image-header" ref="root">
 		<header
 			class="inline-flex"
 			:style="{

src/components/pages/LinkAnalyzer.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="analyzer_tab" class="image_header" ref="root">
+	<div id="analyzer_tab" class="image-header" ref="root">
 		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
 
 		<div v-if="link === ''">

src/components/pages/Tracklist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative fixed_footer image_header" ref="root">
+	<div class="relative fixed_footer image-header" ref="root">
 		<header
 			:style="{
 				'background-image':