separation scss

assets/css/_home-highlight.scss

@@ -0,0 +1,74 @@
+
+.highlight-block{
+
+ 
+        background-color: var(--color);
+        border: 1px solid var(--color-txt-light);
+        border-radius: var(--radius-small);
+        padding: calc(var(--padding-inner)*1.5) var(--padding-inner); 
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        gap: var(--unit);
+
+        figure{
+            width: 100%;
+            max-width: 160px;
+            aspect-ratio: 4/5;
+            border: 1px solid var(--color-medium);
+            border-radius: var(--radius-small);
+            overflow: hidden;
+
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        .label{
+            font-weight: 600;
+            margin-bottom: calc(var(--unit)*0.5);
+            /* text-decoration: 1px underline;
+            text-underline-offset: 3px; */
+            color: var(--color);
+
+            display: inline-flex;
+            align-items: center;
+            background-color: var(--color-light);
+            height: var(--unit);
+            padding: 0px 1ch;
+            border-radius: var(--radius-btn);
+        }
+
+        .title{
+            font-family: var(--font-title);
+            font-size: 1.4rem;
+            font-weight: normal;
+            margin-top: 0.5em;
+             margin-bottom: 0.25em;
+             color: var(--color-light);
+
+        }
+        .details{
+              margin-bottom: calc(var(--unit)*0.75);
+            //   font-size: 0.8rem;
+              color: var(--color-light);
+              font-weight: 500;
+
+        }
+
+        .content{
+            position: relative;
+        }
+
+        .see-more{
+            position: absolute;
+            bottom: 0;
+            font-size: var(--fs-small);
+            --hover-bg: var(--color);
+        }
+        
+
+}