big ui refractor

client/src/styles/pages/_lesson.scss

@@ -1,8 +1,8 @@
-@use '../abstracts/variables' as *;
-@use '../abstracts/mixins' as *;
+@use '../abstracts' as *;
 
 .page-container-center {
-	height: 100%;
+	min-height: 100%;
+	height: auto;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -11,17 +11,6 @@
 	overflow-y: auto;
 }
 
-.lesson-card {
-	width: 100%;
-	max-width: $size-lesson-card-width;
-	border-radius: $radius-xl !important;
-	border: $border-subtle;
-	background-color: $color-surface !important;
-	min-height: $size-lesson-card-min-height;
-	display: flex;
-	flex-direction: column;
-}
-
 .hero-wrapper {
 	width: $size-hero-wrapper;
 	height: $size-hero-wrapper;
@@ -37,8 +26,8 @@
 
 .radical-chip {
 	border-radius: $radius-md;
-	border: $border-subtle;
-	background-color: #27272a;
+	border: $border-width-sm solid $color-border;
+	background-color: $color-surface-lighter;
 
 	img {
 		filter: invert(1);
@@ -62,7 +51,7 @@
 	.label {
 		font-size: $font-xs;
 		color: #666;
-		letter-spacing: 1px;
+		letter-spacing: 0.0625rem;
 		text-transform: uppercase;
 		margin-bottom: $spacing-xs;
 	}