lrl layout done

src/styles/components/featurelist.css

@@ -0,0 +1,90 @@
+.featurelist-section {
+  position: relative;
+  margin-block: 1rem;
+}
+
+.featurelist {
+  max-width: 100%;
+  list-style: none;
+  margin: unset;
+  margin-inline: 0.618rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.featurelist-item {
+  position: relative;
+  display: flex;
+  gap: 0.618rem;
+  flex-direction: column;
+  align-items: center;
+  min-height: 330px;
+  margin-block: 0.618rem;
+  border-radius: 9px;
+  background-color: hsla(var(--blue) 100 81 / 0.05);
+  padding-inline: 0.618rem;
+  padding-block: 1.217rem;
+  border: 1px solid hsla(0 0 100 / 0.05);
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0.618rem;
+    z-index: -1;
+    background-image: radial-gradient(
+      hsla(0 0 100 / 0.1) 1px,
+      transparent 1px
+    );
+    background-position: 50% 50%;
+    background-size: 1.1rem 1.1rem;
+  }
+  & .shiki {
+    margin-block: unset;
+  }
+}
+
+.feature-text {
+  text-align: center;
+  & .feature-title {
+    margin-bottom: 0.217rem;
+  }
+  & .feature-subtitle {
+    color: #afafaf;
+  }
+}
+
+.feature-showcase {
+  width: max-content;
+  aspect-ratio: 16 / 9;
+}
+
+@media (min-width: 65rem) {
+  .featurelist {
+    width: auto;
+    align-items: center;
+  }
+  .feature-text {
+    margin-left: 2.218rem;
+    width: 30rem;
+  }
+  .featurelist-item {
+    width: 100%;
+    padding: unset;
+    padding: 1.217rem;
+    justify-content: space-between;
+    flex-direction: row;
+  }
+  .featurelist-item.right {
+    flex-direction: row-reverse;
+    & .feature-text {
+      margin-right: 2.118rem;
+      margin-left: unset;
+      text-align: right;
+    }
+  }
+  .feature-text {
+    text-align: left;
+  }
+  .feature-showcase {
+    width: auto;
+  }
+}

src/styles/global.css

@@ -11,6 +11,8 @@
 @import "./docs/docs.css";
 @import "./docs/collapsible.css";
 
+@import "./components/featurelist.css";
+
 .changing-theme * {
   transition: none !important;
 }
@@ -51,6 +53,17 @@ html.dark {
 }
 
 /* layout and positioning */
+.separator-el {
+  width: 75%;
+  height: 1px;
+  margin-block: 0.618rem;
+  background: linear-gradient(
+    to right,
+    transparent,
+    hsl(var(--blue) 100 59),
+    transparent
+  );
+}
 .unset {
   all: unset;
 }

src/styles/main-page.css

@@ -50,9 +50,12 @@ h1.gradient-text {
 
 .marquee-buttons {
   display: flex;
-  gap: 3rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2.217rem;
   font-size: 1.874rem;
   font-weight: 600;
+  margin-inline: 0.618rem;
 }
 
 .marquee-button {
@@ -75,7 +78,7 @@ h1.gradient-text {
 .marquee {
   position: relative;
   width: 100%;
-  margin-block: 1.817rem;
+  margin-block: 1.618rem;
 }
 
 .marquee-content {
@@ -94,7 +97,7 @@ h1.gradient-text {
 }
 
 .marquee-item-spacing {
-  width: 75%;
+  width: 75svw;
   max-width: 80rem;
   aspect-ratio: 16 / 9;
 }
@@ -146,8 +149,11 @@ h1.gradient-text {
 }*/
 
 .call-buttons {
-  margin-bottom: 1.618rem;
+  margin-bottom: 1rem;
+  margin-inline: 0.618rem;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 3rem;
 }