css styles fixed

Author: aidankmcalister

src/css/gettingStarted.module.scss

@@ -23,7 +23,7 @@
   border-radius: 8px;
   border: 1px solid var(--border-color);
   background: var(--surface-brand-grey-strong);
-  width: 100%;
+  width: fit-content;
   a {
     text-decoration: underline;
   }
@@ -69,31 +69,6 @@
   letter-spacing: -0.8px;
 }
 
-// .grid {
-//   gap: 16px;
-//   display: grid;
-//   margin-top: 24px;
-//   grid-template-columns: none;
-//   @media (min-width: 600px) {
-//     grid-template-columns: 1fr 1fr;
-//   }
-//   a {
-//     border-color: var(--ifm-btn-border-color);
-//     background: transparent;
-//     color: var(--main-font-color);
-//     &:hover {
-//       border-color: var(--ifm-btn-border-color-active);
-//       background: transparent;
-//     }
-//   }
-// }
-
-// .separator {
-//   height: 100%;
-//   width: 1px;
-//   border-left: 1px solid var(--ifm-btn-border-color);
-// }
-
 .linkCardWrapper {
   border: 1px solid var(--border-color);
   padding: 20px 24px;
@@ -113,10 +88,6 @@
     border-radius: 8px;
     border: 1px solid var(--surface-brand-default);
     background: var(--surface-brand-light);
-    // &:hover {
-    //   background: #b7f4ee;
-    //   border-color: #154f47;
-    // }
   }
   .title {
     display: inline-flex;
@@ -146,22 +117,6 @@
   }
 }
 
-// .tab {
-//   padding: 15px;
-//   background-color: var(--main-bgd-color);
-//   border: 1px solid var(--indigo-600);
-//   border-radius: 0px 8px 8px 8px;
-//   font-family: Inter;
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 20px;
-//   letter-spacing: 0em;
-//   text-align: left;
-//   p {
-//     margin-top: 0;
-//   }
-// }
-
 .squareWrapper {
   width: 90px;
   height: 90px;
@@ -194,10 +149,14 @@
 
 .list {
   display: grid;
-  gap: 16px;
   margin-top: 16px;
-  max-width: fit-content;
+  width: fit-content;
   grid-template-columns: repeat(2, auto);
+  gap: 16px;
+  width: fit-content;
+  display: flex;
+  justify-content: flex-start;
+
   &:not(.framedList) {
     @media (min-width: 1400px) {
       grid-template-columns: repeat(7, auto);
@@ -247,66 +206,3 @@
     flex-wrap: wrap;
   }
 }
-
-// .list {
-//   display: grid;
-//   // Gap with no trailing margin
-//   > * + * {
-//     margin-left: 16px;
-//   }
-//   max-width: fit-content;
-//   grid-template-columns: repeat(2, auto);
-//   // &:has(.borderBox) {
-//   //   display: grid;
-//   //   gap: 16px;
-//   //   border: 2px solid blue;
-//   // }
-//   &:not(.framedList) {
-//     @media (min-width: 1400px) {
-//       grid-template-columns: repeat(7, auto);
-//     }
-//     @media (min-width: 997px) and (max-width: 1400px) {
-//       grid-template-columns: repeat(4, auto);
-//     }
-//     @media (min-width: 816px) and (max-width: 997px) {
-//       grid-template-columns: repeat(7, auto);
-//     }
-//     @media (min-width: 500px) and (max-width: 816px) {
-//       grid-template-columns: repeat(4, auto);
-//     }
-//     @media (min-width: 410px) and (max-width: 500px) {
-//       grid-template-columns: repeat(3, auto);
-//     }
-//   }
-//   // &.framedList {
-//   //   background: var(--main-bgd-color);
-//   //   border: 1px solid var(--ifm-btn-border-color);
-//   //   border-radius: 8px;
-//   //   padding: 24px 16px 16px 16px;
-//   //   justify-content: center;
-//   //   @media (min-width: 1240px) {
-//   //     grid-template-columns: repeat(6, auto);
-//   //   }
-//   //   @media (min-width: 1025px) and (max-width: 1240px) {
-//   //     grid-template-columns: repeat(3, auto);
-//   //   }
-//   //   @media (min-width: 768px) and (max-width: 1025px) {
-//   //     grid-template-columns: repeat(4, auto);
-//   //   }
-//   //   @media (min-width: 480px) and (max-width: 768px) {
-//   //     grid-template-columns: repeat(4, auto);
-//   //   }
-//   //   @media (min-width: 410px) and (max-width: 479px) {
-//   //     grid-template-columns: repeat(3, auto);
-//   //   }
-//   //   .squareWrapper {
-//   //     background: var(--surface-primary);
-//   //   }
-//   // }
-//   // &.splitList {
-//   //   width: fit-content;
-//   //   display: flex;
-//   //   justify-content: flex-start;
-//   //   flex-wrap: wrap;
-//   // }
-// }