style: CoverContainer; style: primary and secondary text

src/styles/scss/globals/_globals.scss

@@ -91,54 +91,3 @@ img {
 	// ? Why?
 	background-color: var(--secondary-background);
 }
-
-// ? Maybe make a component?
-.cover_container {
-	position: relative;
-
-	.coverart {
-		display: block;
-		backface-visibility: hidden;
-		transition: 0.5s ease;
-		opacity: 1;
-		width: 100%;
-		height: auto;
-	}
-
-	.download_overlay {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		transition: 0.5s ease;
-		opacity: 0;
-		border: 0px;
-		border-radius: 50%;
-		// background-color: #000000;
-		padding: 0px;
-		min-width: 32px;
-		height: 44px;
-		text-align: center;
-
-		i {
-			cursor: pointer;
-			padding: 10px;
-			color: white;
-		}
-
-		&:focus {
-			opacity: 1;
-		}
-	}
-
-	&:hover {
-		.coverart {
-			opacity: 0.75;
-		}
-
-		.download_overlay {
-			opacity: 1;
-			border: 0px;
-		}
-	}
-}

src/styles/scss/style.scss

@@ -24,6 +24,6 @@ body {
 @import './globals/globals';
 @import './globals/tables';
 
-@import './tabs/search-tab';
+@import './tabs/release-grid';
 @import './tabs/settings-tab';
 @import './tabs/tabs';

src/styles/scss/tabs/_release-grid.scss

@@ -0,0 +1,17 @@
+.release_grid {
+	@apply gap-4 grid;
+
+	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.primary-text {
+	@apply mb-1 transition-colors duration-200 ease-in-out;
+
+	&:hover {
+		@apply text-primary;
+	}
+}
+
+.secondary-text {
+	@apply mb-1 text-sm opacity-75;
+}

src/styles/scss/tabs/_search-tab.scss

@@ -1,24 +0,0 @@
-/* Releases */
-.release {
-	.primary-text,
-	.secondary-text {
-		margin: 0rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.secondary-text {
-		opacity: 0.75;
-		font-size: 0.875rem;
-
-		.material-icons {
-			font-size: 1.0625rem !important;
-			margin-left: 0.25rem;
-		}
-	}
-}
-
-.release_grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
-	grid-gap: 1rem;
-}