diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index c2ccb934..e7df3019 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -97,7 +97,13 @@ let init = (config) => {
 
 			return async () => {
 				let { code, map } = await lightningcss.bundleAsync({
+					drafts: {
+						customMedia: true,
+					},
 					filename: url,
+					include:
+						lightningcss.Features.MediaQueries |
+						lightningcss.Features.Nesting,
 					minify: true,
 					sourceMap: isDevelopment,
 					targets: lightningcss.browserslistToTargets(
diff --git a/source/pages/index.njk b/source/pages/index.njk
index 401bf5f8..a443a6a1 100644
--- a/source/pages/index.njk
+++ b/source/pages/index.njk
@@ -144,7 +144,7 @@ permalink: 'index.html'
 					</div>
 				</dl>
 				<h3 class="intro__myself-title">A little bit about myself</h3>
-				<p class="intro__myself-desk">
+				<p class="intro__myself-desc">
 					With semantics, a11y and love
 					<span aria-hidden="true">&lt;3</span>
 				</p>
diff --git a/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js b/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js
index 0655ab0a..75095614 100644
--- a/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js
+++ b/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js
@@ -68,7 +68,7 @@ class EasterEgg {
 		this.#handleSettingButtonClick =
 			this.#clickSettingButtonHandler.bind(this)
 		this.#handleWindowResize = initDebounce(
-			this.#resizeWindowHandler,
+			this.#resizeWindowHandler.bind(this),
 			RESIZE_DELAY,
 		)
 	}
diff --git a/source/styles/blocks/exp-filter.css b/source/styles/blocks/exp-filter.css
index 9916046a..3c98111c 100644
--- a/source/styles/blocks/exp-filter.css
+++ b/source/styles/blocks/exp-filter.css
@@ -11,6 +11,21 @@
 	justify-content: space-between;
 	min-height: 60px;
 	padding: 5px 8px;
+
+	@media (width >= 350px) {
+		padding: 5px 28px 5px 23px;
+	}
+
+	@media (width >= 620px) {
+		align-items: center;
+		padding: 10px 8px;
+	}
+
+	@media (--width-desktop) {
+		max-width: 940px;
+		margin: 0 auto;
+		padding: 17px 8px;
+	}
 }
 
 .exp-filter__skills-type {
@@ -20,17 +35,6 @@
 	border: 0;
 }
 
-.exp-filter__skill-types {
-	margin: 0;
-	padding: 0;
-	border: 0;
-}
-
-.exp-filter__skill-title {
-	padding: 0 0 0 7px;
-	color: var(--color--secondary);
-}
-
 .exp-filter__list {
 	display: flex;
 	flex-direction: column;
@@ -39,51 +43,42 @@
 	list-style: none;
 }
 
-.exp-filter__skill-types .exp-filter__list {
-	flex-flow: row wrap;
-	align-items: center;
-}
-
 .exp-filter__item {
 	padding: 0 5px 0 0;
 }
 
-.exp-filter__skill-types .exp-filter__item {
-	width: 50%;
-}
-
-@media (width >= 350px) {
-	.exp-filter__wrapper {
-		padding: 5px 28px 5px 23px;
-	}
-}
-
-@media (width >= 500px) {
-	.exp-filter__skills-type {
-		width: unset;
-	}
+.exp-filter__skill-types {
+	margin: 0;
+	padding: 0;
+	border: 0;
 
-	.exp-filter__list {
+	& .exp-filter__list {
 		flex-flow: row wrap;
 		align-items: center;
 	}
-}
 
-@media (width >= 620px) {
-	.exp-filter__wrapper {
-		align-items: center;
-		padding: 10px 8px;
+	& .exp-filter__item {
+		width: 50%;
 	}
 
-	.exp-filter__skill-types {
-		max-width: unset;
+	@media (width >= 500px) {
+		width: unset;
 	}
 
-	.exp-filter__skill-types .exp-filter__item {
-		width: unset;
+	@media (width >= 620px) {
+		max-width: unset;
+
+		& .exp-filter__item {
+			width: unset;
+		}
 	}
+}
+
+.exp-filter__skill-title {
+	padding: 0 0 0 7px;
+	color: var(--color--secondary);
 
-	.exp-filter__skill-title {
+	@media (width >= 620px) {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -96,11 +91,3 @@
 		clip-path: inset(100%);
 	}
 }
-
-@media (width >= 940px) {
-	.exp-filter__wrapper {
-		max-width: 940px;
-		margin: 0 auto;
-		padding: 17px 8px;
-	}
-}
diff --git a/source/styles/blocks/favorites.css b/source/styles/blocks/favorites.css
index a6c6c3cb..e42872e8 100644
--- a/source/styles/blocks/favorites.css
+++ b/source/styles/blocks/favorites.css
@@ -1,27 +1,35 @@
 .favorites {
 	padding: 30px 0 0;
 	background-color: var(--color--secondary);
+
+	@media print {
+		display: none;
+	}
 }
 
 .favorites__wrapper {
 	position: relative;
 	background-color: var(--color--primary);
-}
 
-.favorites__wrapper::before {
-	position: absolute;
-	content: "";
-	inset: 0;
-	background: repeating-conic-gradient(
-			var(--color--secondary) 0% 25%,
-			var(--color--primary) 0% 50%
-		)
-		50%/ 50px 50px;
-	filter: var(--invert-icon--primary);
+	&::before {
+		position: absolute;
+		content: "";
+		inset: 0;
+		background: repeating-conic-gradient(
+				var(--color--secondary) 0% 25%,
+				var(--color--primary) 0% 50%
+			)
+			50%/ 50px 50px;
+		filter: var(--invert-icon--primary);
+	}
 }
 
 .favorites__header {
 	margin: 0 0 35px;
+
+	@media (--width-desktop) {
+		margin: 0 0 50px;
+	}
 }
 
 .favorites__list {
@@ -32,6 +40,14 @@
 	margin: 0;
 	padding: 45px 15px;
 	list-style: none;
+
+	@media (width >= 550px) {
+		padding: 50px 15px;
+	}
+
+	@media (width >= 810px) {
+		padding: 55px 15px;
+	}
 }
 
 .favorites__item {
@@ -77,27 +93,3 @@
 .favorites__item-text--js {
 	background-color: #ffe100;
 }
-
-@media print {
-	.favorites {
-		display: none;
-	}
-}
-
-@media (width >= 550px) {
-	.favorites__list {
-		padding: 50px 15px;
-	}
-}
-
-@media (width >= 810px) {
-	.favorites__list {
-		padding: 55px 15px;
-	}
-}
-
-@media (width >= 940px) {
-	.favorites__header {
-		margin: 0 0 50px;
-	}
-}
diff --git a/source/styles/blocks/footer.css b/source/styles/blocks/footer.css
index d0eefad0..b09dcaed 100644
--- a/source/styles/blocks/footer.css
+++ b/source/styles/blocks/footer.css
@@ -4,6 +4,10 @@
 	gap: 15px 0;
 	padding: 30px 15px;
 	background-color: var(--color--secondary);
+
+	@media print {
+		display: none;
+	}
 }
 
 .footer__social-list {
@@ -14,17 +18,17 @@
 	position: relative;
 	width: 210px;
 	height: 47px;
-}
 
-.footer__routine-wrapper::before {
-	position: absolute;
-	top: 4px;
-	right: 30px;
-	z-index: var(--z-index--level-one);
-	content: "";
-	width: 42px;
-	height: 32px;
-	background-image: url("../images/routine-rose.bg.svg");
+	&::before {
+		position: absolute;
+		top: 4px;
+		right: 30px;
+		z-index: var(--z-index--level-one);
+		content: "";
+		width: 42px;
+		height: 32px;
+		background-image: url("../images/routine-rose.bg.svg");
+	}
 }
 
 .footer__routine {
@@ -34,9 +38,3 @@
 	background-image: url("../images/routine.bg.svg");
 	filter: var(--invert-icon--primary);
 }
-
-@media print {
-	.footer {
-		display: none;
-	}
-}
diff --git a/source/styles/blocks/form-control.css b/source/styles/blocks/form-control.css
index 2646d8ef..a068bb98 100644
--- a/source/styles/blocks/form-control.css
+++ b/source/styles/blocks/form-control.css
@@ -25,23 +25,25 @@
 	background-color: var(--color--secondary);
 	border: 0;
 	border-radius: 0;
-}
 
-.form-control__input--checkbox::before {
-	position: absolute;
-	top: 10px;
-	left: 7px;
-	content: "";
-	width: 14px;
-	height: 6px;
-	border: 2px solid var(--color--primary);
-	border-top: 0;
-	border-right: 0;
-	transform: scale(0) rotate(-45deg);
-	transform-origin: bottom left;
-	transition: transform 0.1s ease-in 25ms;
-}
+	&::before {
+		position: absolute;
+		top: 10px;
+		left: 7px;
+		content: "";
+		width: 14px;
+		height: 6px;
+		border: 2px solid var(--color--primary);
+		border-top: 0;
+		border-right: 0;
+		transform: scale(0) rotate(-45deg);
+		transform-origin: bottom left;
+		transition: transform 0.1s ease-in 25ms;
+	}
 
-.form-control__input--checkbox:checked::before {
-	transform: scale(1) rotate(-45deg);
+	&:checked {
+		&::before {
+			transform: scale(1) rotate(-45deg);
+		}
+	}
 }
diff --git a/source/styles/blocks/header.css b/source/styles/blocks/header.css
index 8e8d5bf9..df66c592 100644
--- a/source/styles/blocks/header.css
+++ b/source/styles/blocks/header.css
@@ -8,27 +8,113 @@
 	height: 100vh;
 	overflow: hidden;
 	background-color: var(--color--secondary);
+
+	&::before {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		content: "";
+		width: 300vw;
+		height: 300vh;
+		margin: -150vh 0 0 -150vw;
+		background-image: url("../images/stars.bg.svg");
+		background-size: 250px;
+		filter: var(--invert-icon--secondary);
+		animation: rotate 200s linear infinite;
+		pointer-events: none;
+	}
+
+	@media print {
+		display: none;
+	}
 }
 
-.header::before {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	content: "";
-	width: 300vw;
-	height: 300vh;
-	margin: -150vh 0 0 -150vw;
-	background-image: url("../images/stars.bg.svg");
-	background-size: 250px;
-	filter: var(--invert-icon--secondary);
-	animation: rotate 200s linear infinite;
-	pointer-events: none;
+.header__navigation-wrapper {
+	position: fixed;
+	top: 13px;
+	right: 15px;
+	z-index: var(--z-index--level-two);
+	display: flex;
+	justify-content: flex-end;
+	width: 45px;
+	height: 45px;
+	transition: all 0.3s;
 }
 
-.header--active::before {
+.header__navigation {
 	display: none;
 }
 
+.header__toggle-object {
+	position: relative;
+	display: block;
+	width: 30px;
+	height: 3px;
+	background-color: var(--color--secondary);
+
+	&::before,
+	&::after {
+		position: absolute;
+		left: 0;
+		content: "";
+		width: 100%;
+		height: 3px;
+		background-color: var(--color--secondary);
+		transform-origin: 50% 50%;
+		transition:
+			top 0.3s 0.3s,
+			transform 0.3s,
+			background-color 500ms;
+	}
+
+	&::before {
+		top: 10px;
+	}
+
+	&::after {
+		top: -10px;
+	}
+}
+
+.header--active {
+	&::before {
+		display: none;
+	}
+
+	& .header__navigation-wrapper {
+		top: 0;
+		left: 0;
+		z-index: var(--z-index--level-six);
+		width: 100%;
+		height: 100%;
+		background-color: var(--color--primary--opacity);
+	}
+
+	& .header__toggle-object {
+		background-color: transparent;
+
+		&::before,
+		&::after {
+			top: 0;
+			transition:
+				top 0.3s,
+				transform 0.3s 0.5s;
+		}
+
+		&::before {
+			transform: rotate3d(0, 0, 1, 45deg);
+		}
+
+		&::after {
+			transform: rotate3d(0, 0, 1, -45deg);
+		}
+	}
+
+	& .header__navigation {
+		display: block;
+	}
+}
+
 .header__logo {
 	position: absolute;
 	top: 13px;
@@ -73,27 +159,6 @@
 	animation: rainbow-text 12s ease infinite;
 }
 
-.header__navigation-wrapper {
-	position: fixed;
-	top: 13px;
-	right: 15px;
-	z-index: var(--z-index--level-two);
-	display: flex;
-	justify-content: flex-end;
-	width: 45px;
-	height: 45px;
-	transition: all 0.3s;
-}
-
-.header--active .header__navigation-wrapper {
-	top: 0;
-	left: 0;
-	z-index: var(--z-index--level-six);
-	width: 100%;
-	height: 100%;
-	background-color: var(--color--primary--opacity);
-}
-
 .header__toggle-button {
 	position: fixed;
 	top: 13px;
@@ -107,68 +172,3 @@
 	border: 0;
 	cursor: pointer;
 }
-
-.header__toggle-object {
-	position: relative;
-	display: block;
-	width: 30px;
-	height: 3px;
-	background-color: var(--color--secondary);
-}
-
-.header--active .header__toggle-object {
-	background-color: transparent;
-}
-
-.header__toggle-object::before,
-.header__toggle-object::after {
-	position: absolute;
-	left: 0;
-	content: "";
-	width: 100%;
-	height: 3px;
-	background-color: var(--color--secondary);
-	transform-origin: 50% 50%;
-	transition:
-		top 0.3s 0.3s,
-		transform 0.3s,
-		background-color 500ms;
-}
-
-.header__toggle-object::before {
-	top: 10px;
-}
-
-.header__toggle-object::after {
-	top: -10px;
-}
-
-.header--active .header__toggle-object::before,
-.header--active .header__toggle-object::after {
-	top: 0;
-	transition:
-		top 0.3s,
-		transform 0.3s 0.5s;
-}
-
-.header--active .header__toggle-object::before {
-	transform: rotate3d(0, 0, 1, 45deg);
-}
-
-.header--active .header__toggle-object::after {
-	transform: rotate3d(0, 0, 1, -45deg);
-}
-
-.header__navigation {
-	display: none;
-}
-
-.header--active .header__navigation {
-	display: block;
-}
-
-@media print {
-	.header {
-		display: none;
-	}
-}
diff --git a/source/styles/blocks/intro.css b/source/styles/blocks/intro.css
index 30ae8183..be420e25 100644
--- a/source/styles/blocks/intro.css
+++ b/source/styles/blocks/intro.css
@@ -1,18 +1,48 @@
 .intro {
 	background-color: var(--color--secondary);
+
+	@media print {
+		* {
+			color: #000000;
+		}
+	}
 }
 
 .intro__wrapper {
 	padding: 30px 0;
+
+	@media (--width-tablet) {
+		padding: 30px 15px 50px;
+	}
+
+	@media (--width-desktop) {
+		max-width: 940px;
+		margin: 0 auto;
+		padding: 30px 15px 80px;
+	}
 }
 
 .intro__header {
 	margin: 0 0 35px;
+
+	@media (--width-desktop) {
+		margin: 0 0 50px;
+	}
+
+	@media print {
+		display: none;
+	}
 }
 
 .intro__content {
 	display: grid;
 	gap: 25px 0;
+
+	@media (--width-tablet) {
+		grid-auto-flow: column;
+		justify-content: center;
+		gap: 0 60px;
+	}
 }
 
 .intro__image-wrapper {
@@ -23,51 +53,69 @@
 	width: 305px;
 	margin: 0 auto;
 	overflow: hidden;
-}
 
-.intro__image-wrapper::before,
-.intro__image-wrapper::after {
-	content: "";
-	position: absolute;
-	left: 50%;
-	width: 100%;
-	mask-repeat: no-repeat;
-	mask-size: contain;
-	mask-position: 50% 50%;
-	transform: translateX(-50%);
-}
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		left: 50%;
+		width: 100%;
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		mask-position: 50% 50%;
+		transform: translateX(-50%);
+	}
 
-.intro__image-wrapper::before {
-	bottom: 0;
-	height: 275px;
-	background-color: var(--color--primary);
-	mask-image: url("../images/intro-photo.mask.svg");
-}
+	&::before {
+		bottom: 0;
+		height: 275px;
+		background-color: var(--color--primary);
+		mask-image: url("../images/intro-photo.mask.svg");
+	}
 
-.intro__image-wrapper::after {
-	bottom: -0.5px;
-	height: 145px;
-	background-color: var(--color--secondary);
-	mask-image: url("../images/intro-photo-border.mask.svg");
-}
+	&::after {
+		bottom: -0.5px;
+		height: 145px;
+		background-color: var(--color--secondary);
+		mask-image: url("../images/intro-photo-border.mask.svg");
+	}
 
-.intro__image-wrapper img {
-	display: block;
-	max-width: 100%;
-	margin: 0 auto;
-	will-change: filter;
-	transform: translateX(15px);
-	filter: drop-shadow(-8px 7px 0.3px var(--color--secondary));
+	& img {
+		display: block;
+		max-width: 100%;
+		margin: 0 auto;
+		will-change: filter;
+		transform: translateX(15px);
+		filter: drop-shadow(-8px 7px 0.3px var(--color--secondary));
+	}
+
+	@media print {
+		margin: 0 auto;
+		padding: 0;
+
+		&::before,
+		&::after {
+			display: none;
+		}
+	}
 }
 
 .intro__personal-wrapper {
 	padding: 0 30px;
+
+	@media (--width-tablet) {
+		padding: 0;
+	}
 }
 
 .intro__personal-title {
 	margin: 0 0 15px;
 	text-align: center;
 	text-transform: uppercase;
+
+	@media (--width-tablet) {
+		text-align: left;
+	}
 }
 
 .intro__list {
@@ -82,107 +130,59 @@
 	gap: 3px 0;
 }
 
+.intro__item--socials {
+	@media print {
+		& .intro__item-title {
+			position: unset;
+			width: unset;
+			height: unset;
+			clip-path: unset;
+		}
+	}
+}
+
 .intro__item-title {
 	font-weight: 700;
+
+	@media print {
+		content: ":";
+	}
 }
 
 .intro__item-desc {
 	margin: 0;
 	line-height: 1;
-}
-
-.intro__item-desc a {
-	color: inherit;
-	text-decoration: none;
-}
-
-.intro__item-desc a[href]:hover {
-	text-decoration: underline;
-}
-
-.intro__myself-title {
-	margin: 0 0 5px;
-	text-align: center;
-	text-transform: uppercase;
-}
 
-.intro__myself-desk {
-	margin: 0;
-	text-align: center;
-}
+	& a {
+		color: inherit;
+		text-decoration: none;
 
-@media print {
-	.intro * {
-		color: #000000;
-	}
-
-	.intro__image-wrapper {
-		margin: 0 auto;
-		padding: 0;
+		&[href]:hover {
+			text-decoration: underline;
+		}
 	}
 
-	.intro__image-wrapper::before,
-	.intro__image-wrapper::after {
-		display: none;
-	}
-
-	.intro__header {
-		display: none;
-	}
-
-	.intro__item-title::after {
-		content: ":";
-	}
-
-	.intro__item--socials .intro__item-title {
-		position: unset;
-		width: unset;
-		height: unset;
-		clip-path: unset;
-	}
-
-	.intro__item-desc {
+	@media print {
 		padding: 0 0 0 7px;
 	}
 }
 
-@media (width >= 640px) {
-	.intro__wrapper {
-		padding: 30px 15px 50px;
-	}
-
-	.intro__content {
-		grid-auto-flow: column;
-		justify-content: center;
-		gap: 0 60px;
-	}
-
-	.intro__personal-wrapper {
-		padding: 0;
-	}
-
-	.intro__personal-title {
-		text-align: left;
-	}
+.intro__myself-title {
+	margin: 0 0 5px;
+	text-align: center;
+	text-transform: uppercase;
 
-	.intro__myself-title {
+	@media (--width-tablet) {
 		margin: 0 0 15px;
 		text-align: left;
 	}
-
-	.intro__myself-desk {
-		text-align: left;
-	}
 }
 
-@media (width >= 940px) {
-	.intro__wrapper {
-		max-width: 940px;
-		margin: 0 auto;
-		padding: 30px 15px 80px;
-	}
+.intro__myself-desc {
+	margin: 0;
+	text-align: center;
 
-	.intro__header {
-		margin: 0 0 50px;
+	@media (--width-tablet) {
+		text-align: left;
 	}
 }
diff --git a/source/styles/blocks/loader.css b/source/styles/blocks/loader.css
index 1c8df511..3db7bb6f 100644
--- a/source/styles/blocks/loader.css
+++ b/source/styles/blocks/loader.css
@@ -3,16 +3,16 @@
 	max-width: 75px;
 	margin: 35px auto;
 	animation: 3s linear infinite loader-animation;
-}
 
-.loader circle {
-	display: block;
-	transform-origin: 50% 50%;
-	animation: 800ms ease-in-out infinite both loader-circle-animation;
-	fill: transparent;
-	stroke: var(--color--primary);
-	stroke-linecap: round;
-	stroke-dasharray: 283;
-	stroke-dashoffset: 280;
-	stroke-width: 6px;
+	& circle {
+		display: block;
+		transform-origin: 50% 50%;
+		animation: 800ms ease-in-out infinite both loader-circle-animation;
+		fill: transparent;
+		stroke: var(--color--primary);
+		stroke-linecap: round;
+		stroke-dasharray: 283;
+		stroke-dashoffset: 280;
+		stroke-width: 6px;
+	}
 }
diff --git a/source/styles/blocks/navigation.css b/source/styles/blocks/navigation.css
index e0a6af71..466e139f 100644
--- a/source/styles/blocks/navigation.css
+++ b/source/styles/blocks/navigation.css
@@ -12,15 +12,17 @@
 	list-style: none;
 }
 
-.navigation__item a {
-	color: var(--color--secondary);
-	font-size: var(--font-size--large);
-	text-transform: lowercase;
-	text-decoration: none;
-	transition: letter-spacing 0.15s;
-}
+.navigation__item {
+	& a {
+		color: var(--color--secondary);
+		font-size: var(--font-size--large);
+		text-transform: lowercase;
+		text-decoration: none;
+		transition: letter-spacing 0.15s;
 
-.navigation__item a:hover {
-	letter-spacing: 3px;
-	text-decoration: underline;
+		&:hover {
+			letter-spacing: 3px;
+			text-decoration: underline;
+		}
+	}
 }
diff --git a/source/styles/blocks/not-easter-egg.css b/source/styles/blocks/not-easter-egg.css
index fc68dae6..507958f4 100644
--- a/source/styles/blocks/not-easter-egg.css
+++ b/source/styles/blocks/not-easter-egg.css
@@ -5,21 +5,25 @@
 	padding: 15px;
 	overflow: hidden;
 	border-radius: 50%;
-}
 
-.not-easter-egg::before {
-	position: absolute;
-	top: 50%;
-	left: -75%;
-	z-index: 2;
-	display: block;
-	content: "";
-	width: 50%;
-	height: 100%;
-	background-color: rgb(255 215 0 / 20%);
-	transform: skewX(-25deg) translateY(-50%);
-	animation: shine 5s infinite;
-	pointer-events: none;
+	&::before {
+		position: absolute;
+		top: 50%;
+		left: -75%;
+		z-index: 2;
+		display: block;
+		content: "";
+		width: 50%;
+		height: 100%;
+		background-color: rgb(255 215 0 / 20%);
+		transform: skewX(-25deg) translateY(-50%);
+		animation: shine 5s infinite;
+		pointer-events: none;
+	}
+
+	@media print {
+		display: none;
+	}
 }
 
 .not-easter-egg__button {
@@ -31,15 +35,9 @@
 	cursor: pointer;
 	opacity: 0;
 	transition: opacity 0.7s ease-in-out;
-}
 
-.not-easter-egg__button:hover,
-.not-easter-egg__button:focus-within {
-	opacity: 1;
-}
-
-@media print {
-	.not-easter-egg {
-		display: none;
+	&:hover,
+	&:focus-within {
+		opacity: 1;
 	}
 }
diff --git a/source/styles/blocks/section-header.css b/source/styles/blocks/section-header.css
index 0b7446d5..2545aafc 100644
--- a/source/styles/blocks/section-header.css
+++ b/source/styles/blocks/section-header.css
@@ -15,15 +15,15 @@
 	margin: 0;
 	padding: 0 0 5px;
 	letter-spacing: 2px;
-}
 
-.section-header__desc::before {
-	position: absolute;
-	bottom: 0;
-	left: 50%;
-	content: "";
-	width: calc(100% / 1.2);
-	height: 1px;
-	background-color: var(--color--primary);
-	transform: translateX(-50%);
+	&::before {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		content: "";
+		width: calc(100% / 1.2);
+		height: 1px;
+		background-color: var(--color--primary);
+		transform: translateX(-50%);
+	}
 }
diff --git a/source/styles/blocks/settings.css b/source/styles/blocks/settings.css
index 029d82e9..ec3d7024 100644
--- a/source/styles/blocks/settings.css
+++ b/source/styles/blocks/settings.css
@@ -30,62 +30,76 @@
 	margin: 0;
 	cursor: pointer;
 	appearance: none;
-}
-
-.settings__item-control::before {
-	position: absolute;
-	content: "";
-	inset: 0;
-	z-index: var(--z-index--level-two);
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 16px;
-	will-change: filter;
-	filter: var(--invert-icon--primary);
-	transition-duration: unset;
-}
-
-.settings__item-control:checked::before {
-	filter: var(--invert-icon--secondary);
-	transition-duration: unset;
-}
-
-.settings__item-control::after {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	z-index: var(--z-index--level-one);
-	display: none;
-	content: "";
-	width: 21px;
-	height: 21px;
-	background-color: var(--color--primary);
-	border-radius: 50%;
-	transform: translate(-50%, -50%);
-}
-
-.settings__item-control:checked::after {
-	display: block;
-}
-
-.settings__item-control--auto::before {
-	background-image: url("../images/auto.bg.svg");
-}
 
-.settings__item-control--light::before {
-	background-image: url("../images/theme-light.bg.svg");
-}
-
-.settings__item-control--dark::before {
-	background-image: url("../images/theme-dark.bg.svg");
-}
-
-.settings__item-control--nopreference::before {
-	background-image: url("../images/notion-no-preference.bg.svg");
-}
-
-.settings__item-control--reduce::before {
-	background-image: url("../images/notion-reduce.bg.svg");
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+	}
+
+	&::before {
+		inset: 0;
+		z-index: var(--z-index--level-two);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: 16px;
+		will-change: filter;
+		filter: var(--invert-icon--primary);
+		transition-duration: unset;
+	}
+
+	&::after {
+		top: 50%;
+		left: 50%;
+		z-index: var(--z-index--level-one);
+		display: none;
+		width: 21px;
+		height: 21px;
+		background-color: var(--color--primary);
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	&:checked {
+		&::before {
+			filter: var(--invert-icon--secondary);
+			transition-duration: unset;
+		}
+
+		&::after {
+			display: block;
+		}
+	}
+}
+
+.settings__item-control--auto {
+	&::before {
+		background-image: url("../images/auto.bg.svg");
+	}
+}
+
+.settings__item-control--light {
+	&::before {
+		background-image: url("../images/theme-light.bg.svg");
+	}
+}
+
+.settings__item-control--dark {
+	&::before {
+		background-image: url("../images/theme-dark.bg.svg");
+	}
+}
+
+.settings__item-control--nopreference {
+	&::before {
+		background-image: url("../images/notion-no-preference.bg.svg");
+	}
+}
+
+.settings__item-control--reduce {
+	&::before {
+		background-image: url("../images/notion-reduce.bg.svg");
+	}
 }
 
 .settings__item-switch {
@@ -101,10 +115,28 @@
 	border: 1px solid var(--color--primary);
 	border-radius: 20px;
 	cursor: pointer;
-}
 
-.settings__item-switch[aria-checked="true"] {
-	background-position: left 8px top 50%;
+	&::before {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		content: "";
+		width: 50%;
+		height: 21px;
+		background-color: var(--color--primary);
+		border-radius: 20px;
+		transform: translate(2px, -50%);
+	}
+
+	&[aria-checked="true"] {
+		background-position: left 8px top 50%;
+
+		&::before {
+			right: 0;
+			left: unset;
+			transform: translate(-2px, -50%);
+		}
+	}
 }
 
 .settings__item-switch--whatislove {
@@ -112,26 +144,8 @@
 	animation-name: append;
 	animation-duration: 1s;
 	animation-timing-function: ease-out;
-}
-
-.settings__item-switch--whatislove[aria-checked="true"] {
-	background-image: url("../images/heart.bg.svg");
-}
-
-.settings__item-switch::before {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	content: "";
-	width: 50%;
-	height: 21px;
-	background-color: var(--color--primary);
-	border-radius: 20px;
-	transform: translate(2px, -50%);
-}
 
-.settings__item-switch[aria-checked="true"]::before {
-	right: 0;
-	left: unset;
-	transform: translate(-2px, -50%);
+	&[aria-checked="true"] {
+		background-image: url("../images/heart.bg.svg");
+	}
 }
diff --git a/source/styles/blocks/social-list.css b/source/styles/blocks/social-list.css
index 99880f73..3393e638 100644
--- a/source/styles/blocks/social-list.css
+++ b/source/styles/blocks/social-list.css
@@ -4,6 +4,31 @@
 	margin: 0;
 	padding: 0;
 	list-style: none;
+
+	@media print {
+		flex-direction: column;
+	}
+}
+
+.social-list__item {
+	@media print {
+		display: flex;
+		align-items: center;
+	}
+}
+
+.social-list__item-title {
+	@media print {
+		position: unset;
+		width: unset;
+		height: unset;
+		margin: 0 5px 0 0;
+		clip-path: unset;
+
+		&::after {
+			content: ":";
+		}
+	}
 }
 
 .social-list__item-link {
@@ -14,10 +39,18 @@
 	background-position: 50% 50%;
 	filter: var(--invert-icon--primary);
 	transition: opacity 200ms ease-out;
-}
 
-.social-list__item-link:hover {
-	opacity: 0.7;
+	&:hover {
+		opacity: 0.7;
+	}
+
+	@media print {
+		filter: none;
+
+		&::after {
+			content: attr(href);
+		}
+	}
 }
 
 .social-list__item-link--github {
@@ -31,34 +64,3 @@
 .social-list__item-link--telegram {
 	background-image: url("../images/social-telegram.bg.svg");
 }
-
-@media print {
-	.social-list {
-		flex-direction: column;
-	}
-
-	.social-list__item {
-		display: flex;
-		align-items: center;
-	}
-
-	.social-list__item-title {
-		position: unset;
-		width: unset;
-		height: unset;
-		margin: 0 5px 0 0;
-		clip-path: unset;
-	}
-
-	.social-list__item-title::after {
-		content: ":";
-	}
-
-	.social-list__item-link {
-		filter: none;
-	}
-
-	.social-list__item-link::after {
-		content: attr(href);
-	}
-}
diff --git a/source/styles/blocks/timeline.css b/source/styles/blocks/timeline.css
index 6fac6fa3..31e0effc 100644
--- a/source/styles/blocks/timeline.css
+++ b/source/styles/blocks/timeline.css
@@ -1,10 +1,18 @@
 .timeline {
 	padding: 30px 0 0;
 	background-color: var(--color--secondary);
+
+	@media print {
+		display: none;
+	}
 }
 
 .timeline__header {
 	margin: 0 0 35px;
+
+	@media (--width-desktop) {
+		margin: 0 0 50px;
+	}
 }
 
 .timeline__list-wrapper {
@@ -12,6 +20,15 @@
 	height: 100vh;
 	padding: 0 30px;
 	overflow-y: auto;
+
+	@media (--width-tablet) {
+		padding: 0 15px;
+	}
+
+	@media (--width-desktop) {
+		max-width: 940px;
+		margin: 0 auto;
+	}
 }
 
 .timeline__list {
@@ -21,29 +38,67 @@
 	margin: 0;
 	padding: 20px 0 80px 30px;
 	list-style: none;
-}
 
-.timeline__list:not(:empty)::before {
-	position: absolute;
-	top: 0;
-	left: 0;
-	content: "";
-	width: 2px;
-	height: 100%;
-	background-color: var(--color--primary);
-}
+	&:not(:empty)::before {
+		position: absolute;
+		top: 0;
+		left: 0;
+		content: "";
+		width: 2px;
+		height: 100%;
+		background-color: var(--color--primary);
+	}
 
-.timeline__list:not(:empty)::after {
-	position: absolute;
-	bottom: 0;
-	left: -6px;
-	content: "";
-	border: 7px solid var(--color--secondary);
-	border-top: 14px solid var(--color--primary);
+	&:not(:empty)::after {
+		position: absolute;
+		bottom: 0;
+		left: -6px;
+		content: "";
+		border: 7px solid var(--color--secondary);
+		border-top: 14px solid var(--color--primary);
+	}
+
+	@media (--width-tablet) {
+		gap: 25px 0;
+		padding: 20px 0 80px;
+
+		&:not(:empty)::before {
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		&:not(:empty)::after {
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
 }
 
 .timeline__item {
 	position: relative;
+
+	@media (--width-tablet) {
+		display: flex;
+		flex-direction: column;
+
+		&:nth-child(even) {
+			align-items: flex-end;
+
+			& .timeline__item-wrapper {
+				&::before {
+					right: 99%;
+					left: unset;
+					border-color: transparent;
+					border-right-color: var(--color--primary);
+				}
+			}
+
+			& .timeline__dates {
+				right: calc(100% + 85px);
+				left: unset;
+			}
+		}
+	}
 }
 
 .timeline__item-wrapper {
@@ -53,6 +108,26 @@
 	border-radius: 4px;
 	box-shadow: 0 1px 10px 0 var(--color--primary--opacity);
 	animation: fade-up 1s;
+
+	@media (--width-tablet) {
+		position: relative;
+		width: 44%;
+		min-height: 90px;
+
+		&::before {
+			position: absolute;
+			top: 30px;
+			left: 99%;
+			content: "";
+			border: 15px solid transparent;
+			border-left-color: var(--color--primary);
+			filter: drop-shadow(0 0 10px var(--color--primary));
+		}
+	}
+
+	@media (--width-desktop) {
+		width: 45%;
+	}
 }
 
 .timeline__item-title {
@@ -75,6 +150,10 @@
 	display: block;
 	margin: 0 0 10px;
 	color: var(--color--red);
+
+	@media (--width-tablet) {
+		margin: 0;
+	}
 }
 
 .timeline__dates {
@@ -82,6 +161,13 @@
 	color: var(--color--secondary);
 	white-space: nowrap;
 	text-align: right;
+
+	@media (--width-tablet) {
+		position: absolute;
+		top: 33px;
+		left: calc(100% + 85px);
+		color: var(--color--primary);
+	}
 }
 
 .timeline__dates-date {
@@ -97,6 +183,11 @@
 	background-color: var(--color--primary);
 	border-radius: 50%;
 	animation: icon-fade-up 1s;
+
+	@media (--width-tablet) {
+		left: 50%;
+		transform: translateX(-50%);
+	}
 }
 
 .timeline__item:hover .timeline__icon-wrapper {
@@ -213,98 +304,3 @@
 	transform: translateY(60px) scale(0);
 	opacity: 0;
 }
-
-@media (width >= 640px) {
-	.timeline__list-wrapper {
-		padding: 0 15px;
-	}
-
-	.timeline__list {
-		gap: 25px 0;
-		padding: 20px 0 80px;
-	}
-
-	.timeline__list:not(:empty)::before {
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.timeline__list:not(:empty)::after {
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.timeline__item {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.timeline__item:nth-child(even) {
-		align-items: flex-end;
-	}
-
-	.timeline__item-wrapper {
-		position: relative;
-		width: 44%;
-		min-height: 90px;
-	}
-
-	.timeline__item-wrapper::before {
-		position: absolute;
-		top: 30px;
-		left: 99%;
-		content: "";
-		border: 15px solid transparent;
-		border-left-color: var(--color--primary);
-		filter: drop-shadow(0 0 10px var(--color--primary));
-	}
-
-	.timeline__item:nth-child(even) .timeline__item-wrapper::before {
-		right: 99%;
-		left: unset;
-		border-color: transparent;
-		border-right-color: var(--color--primary);
-	}
-
-	.timeline__item-link {
-		margin: 0;
-	}
-
-	.timeline__dates {
-		position: absolute;
-		top: 33px;
-		left: calc(100% + 85px);
-		color: var(--color--primary);
-	}
-
-	.timeline__item:nth-child(even) .timeline__dates {
-		right: calc(100% + 85px);
-		left: unset;
-	}
-
-	.timeline__icon-wrapper {
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-@media print {
-	.timeline {
-		display: none;
-	}
-}
-
-@media (width >= 940px) {
-	.timeline__header {
-		margin: 0 0 50px;
-	}
-
-	.timeline__list-wrapper {
-		max-width: 940px;
-		margin: 0 auto;
-	}
-
-	.timeline__item-wrapper {
-		width: 45%;
-	}
-}
diff --git a/source/styles/globals/animations.css b/source/styles/globals/animations.css
index bf262b02..acb60ca6 100644
--- a/source/styles/globals/animations.css
+++ b/source/styles/globals/animations.css
@@ -34,6 +34,18 @@
 	}
 }
 
+@media (--width-tablet) {
+	@keyframes icon-fade-up {
+		from {
+			transform: translate(-50%, 70px);
+		}
+
+		to {
+			transform: translateY(-50%, 0);
+		}
+	}
+}
+
 @keyframes heartbeat {
 	0% {
 		transform: scale(0.83) translate(42px, 8px);
@@ -128,15 +140,3 @@
 		opacity: 1;
 	}
 }
-
-@media (width >= 640px) {
-	@keyframes icon-fade-up {
-		from {
-			transform: translate(-50%, 70px);
-		}
-
-		to {
-			transform: translateY(-50%, 0);
-		}
-	}
-}
diff --git a/source/styles/globals/medias.css b/source/styles/globals/medias.css
new file mode 100644
index 00000000..a7edd7ce
--- /dev/null
+++ b/source/styles/globals/medias.css
@@ -0,0 +1,2 @@
+@custom-media --width-tablet (width >= 640px);
+@custom-media --width-desktop (width >= 940px);
diff --git a/source/styles/index.css b/source/styles/index.css
index a9b0b4ec..7af76299 100644
--- a/source/styles/index.css
+++ b/source/styles/index.css
@@ -1,4 +1,5 @@
 @import url("./globals/variables.css");
+@import url("./globals/medias.css");
 @import url("./globals/box-sizing.css");
 @import url("./globals/fonts.css");
 @import url("./globals/scrollbar.css");