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;
+  }
+}