fix responsive preview and breakpoint and text color flashing

src/components/resume/index.astro

@@ -60,7 +60,7 @@ const {
 				<td
 					colspan="4"
 					style="width: 511.61px"
-					class="[ lg:grid-column ]"
+					class="[ grid-column ]"
 					aria-label="Relevant Experience History"
 				>
 					<section
@@ -81,10 +81,10 @@ const {
 					</section>
 				</td>
 
-				<td colspan="2" style="width: 270.77px" class="[ lg:grid-column ]">
+				<td colspan="2" style="width: 270.77px" class="[ grid-column ]">
 					<!-- Skills -->
 					<section
-						class="skills [ tags-catalog extend ] [ lg:bg-none ]"
+						class="skills [ tags-catalog extend ] [ bg-none ]"
 						aria-label="skills"
 					>
 						{

src/pages/resume/index.astro

@@ -1,22 +1,22 @@
 ---
-import website from '@/website.config';
+import website from "@/website.config";
 
-import AppLayout from '@/layouts/app.astro';
-import SEO from '@/components/SEO/index.svelte';
-import { Picture } from 'astro:assets';
-import resumePreview from '@/images/ResumePreview.png';
-import Resume from '@/components/resume';
-import { Content } from '@/lib/content';
+import AppLayout from "@/layouts/app.astro";
+import SEO from "@/components/SEO/index.svelte";
+import { Picture } from "astro:assets";
+import resumePreview from "@/images/ResumePreview.png";
+import Resume from "@/components/resume";
+import { Content } from "@/lib/content";
 
-const pageTitle = 'Resume',
+const pageTitle = "Resume",
 	metadescription =
-		'Hard working and detail oriented professional, seeking a software development position where I can use my skills and contribute to the growth of a company.',
-	slug = '/Resume',
+		"Hard working and detail oriented professional, seeking a software development position where I can use my skills and contribute to the growth of a company.",
+	slug = "/Resume",
 	{ author } = website;
 
 const breadcrumbs = [
 	{
-		name: 'Home',
+		name: "Home",
 		slug: Astro.url.origin,
 	},
 	{
@@ -47,12 +47,12 @@ const data = await Content.getLatestResumeData();
 <SEO {...seo} client:load="svelte" />
 
 <AppLayout>
-	<div class="lg:hidden">
+	<div class="resume:hidden">
 		<Picture
 			src={resumePreview}
-			formats={['avif', 'webp', 'png']}
-			widths={[240, 540, 720, resumePreview.width]}
-			sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${resumePreview.width}px`}
+			formats={["avif", "webp", "png"]}
+			widths={[360, 720, 1080, resumePreview.width]}
+			sizes={`(max-width: 360px) 360px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, ${resumePreview.width}px`}
 			alt="Resume"
 		/>
 	</div>

src/styles/abstracts/_breakpoints.scss

@@ -6,4 +6,5 @@ $breakpoints: (
 	md: $base-point + calc($ratio * 3),
 	lg: $base-point + calc($ratio * 6),
 	xl: $base-point + calc($ratio * 9),
+	resume: calc(297mm + calc(46px * 2) + 1rem)
 ) !default;

src/styles/base/_base.scss

@@ -2,4 +2,5 @@
 
 body {
 	background-color: var(--bg-color);
+	color: var(--text-color);
 }

src/styles/composition/_index.scss

@@ -21,7 +21,7 @@ section#resume.resume {
 	color: var(--resume-text);
 	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
 
-	@include respond-to(lg) {
+	@include respond-to(resume) {
 		display: grid;
 		// thead, tbody {
 		//     width: 100%;

src/styles/utilities/_grid.scss

@@ -1,11 +1,8 @@
 @use '../abstracts/mixins' as *;
 
-.lg\:grid-column {
+.grid-column {
 	border-top: 2px solid var(--primary-color);
-
-	@include respond-to(lg) {
-		grid-row: span var(--grid-rows);
-	}
+	grid-row: span var(--grid-rows);
 }
 
 .content-grid {

src/styles/utilities/_index.scss

@@ -27,14 +27,12 @@
 	overflow: hidden;
 }
 
-.lg\:bg-none {
-	@include respond-to(lg) {
-		background-color: transparent;
-	}
+.bg-none {
+	background-color: transparent;
 }
 
-.lg\:hidden {
-	@include respond-to(lg) {
+.resume\:hidden {
+	@include respond-to(resume) {
 		display: none;
 	}
 }