improvement styles example

src/App.css

@@ -12,6 +12,10 @@
   align-items: center;
 }
 
+.logo h1 {
+  font-size: 1.5rem;
+}
+
 .logo img {
   height: 6em;
   padding: 1.5em;
@@ -22,6 +26,12 @@
   position: fixed;
   top: 0;
   right: 0;
+  padding: .6rem !important;
+}
+
+.btn-mode svg {
+  width: 20px;
+  height: 20px;
 }
 
 code {
@@ -36,15 +46,22 @@ code {
 .content {
   background: var(--vtl-background);
   background: var(--vtl-background-gradient);
-  padding: 1rem 2rem;
-  margin: 2rem;
+  padding: 1rem 1rem;
+  margin: 1rem;
   border-radius: 10px;
+  border: 1px solid var(--vtl-background);
+  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.1);
 }
 
 .content h2 {
   margin-top: 0;
 }
 
+.limited .techs {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -56,7 +73,7 @@ code {
 
 @media screen and (max-width: 800px) {
   .logo h1 {
-    font-size: 1.5rem;
+    font-size: 1rem;
   }
 }
 

src/App.tsx

@@ -37,7 +37,7 @@ function App() {
         <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
         <ReactTechsLogos name="facebook" hiddenLabel />
       </div>
-      <div className="content">
+      <div className="content limited">
         <h2 className="title">List of techs limited</h2>
         <code>
           {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}

src/components/ReactTechsLogos/style.scss

@@ -3,7 +3,6 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 20px;
   .title {
     width: 100%;
     text-align: center;
@@ -33,6 +32,7 @@ figure.tech-container {
 figure {
   position: relative;
   text-align: center;
+  margin: .2rem;
   figcaption {
     font-size: .7rem;
     &.tooltip {