diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index 6aaa24127..000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "rules": {
-
-  }
-}
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 021c539ad..30da39def 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -2,4 +2,7 @@
 
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  rules: {
+    'selector-class-pattern': null,
+  }
 };
diff --git a/app/styles/app.css b/app/styles/app.css
index 6f52e92f3..adab1fdf1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,18 +1,18 @@
-@import "components/addon-tabs.css";
-@import "components/brand-logos.css";
-@import "components/ecosystem-icons.css";
-@import "components/cta-emberconf.css";
-@import "components/faqs.css";
-@import "components/homepage-image-grid.css";
-@import "components/homepage-hero-callout.css";
-@import "components/lts-table.css";
-@import "components/release-timeline.css";
-@import "components/survey-section.css";
-@import "components/surveys.css";
-@import "components/team-list.css";
-@import "components/terminal-code.css";
-@import "components/callout-banner.css";
-@import "legacy/form.css";
+@import url("components/addon-tabs.css");
+@import url("components/brand-logos.css");
+@import url("components/ecosystem-icons.css");
+@import url("components/cta-emberconf.css");
+@import url("components/faqs.css");
+@import url("components/homepage-image-grid.css");
+@import url("components/homepage-hero-callout.css");
+@import url("components/lts-table.css");
+@import url("components/release-timeline.css");
+@import url("components/survey-section.css");
+@import url("components/surveys.css");
+@import url("components/team-list.css");
+@import url("components/terminal-code.css");
+@import url("components/callout-banner.css");
+@import url("legacy/form.css");
 
 @media only percy {
   .hide-in-percy {
diff --git a/app/styles/components/addon-tabs.css b/app/styles/components/addon-tabs.css
index 957af3cdd..f637a4ddf 100644
--- a/app/styles/components/addon-tabs.css
+++ b/app/styles/components/addon-tabs.css
@@ -1,7 +1,11 @@
 .addon-tabs {
-  background: linear-gradient(0deg, rgba(52, 55, 62, 1) 0%, rgba(66, 69, 77, 1) 100%);
+  background: linear-gradient(
+    0deg,
+    rgb(52 55 62 / 100%) 0%,
+    rgb(66 69 77 / 100%) 100%
+  );
   border-radius: 15px;
-  box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.75);
+  box-shadow: 0 5px 15px -10px rgb(0 0 0 / 75%);
   min-height: 364px;
   width: 100%;
 }
diff --git a/app/styles/components/brand-logos.css b/app/styles/components/brand-logos.css
index 96250c3c9..fc3a5cf02 100644
--- a/app/styles/components/brand-logos.css
+++ b/app/styles/components/brand-logos.css
@@ -13,7 +13,7 @@
 
 .brand-logos > li {
   border: 1px solid rgba($black, 0.3);
-  background-image: url('/images/brand/brand-bg.png');
+  background-image: url("/images/brand/brand-bg.png");
   border-radius: 4px;
   padding: 1rem 1.5rem;
 }
@@ -27,5 +27,5 @@
 }
 
 .brand-logos > li:nth-child(3) {
-  background-color: rgba(199, 52, 31, 0.9);
+  background-color: rgb(199 52 31 / 90%);
 }
diff --git a/app/styles/components/callout-banner.css b/app/styles/components/callout-banner.css
index 358d99794..50218794a 100644
--- a/app/styles/components/callout-banner.css
+++ b/app/styles/components/callout-banner.css
@@ -22,7 +22,7 @@
 }
 
 .callout-banner a + a::before {
-  content: '';
+  content: "";
   width: 3px;
   height: 3px;
   background: white;
diff --git a/app/styles/components/cta-emberconf.css b/app/styles/components/cta-emberconf.css
index ff5f775df..bcc2ac75e 100644
--- a/app/styles/components/cta-emberconf.css
+++ b/app/styles/components/cta-emberconf.css
@@ -27,7 +27,7 @@
   margin-top: 1rem;
 }
 
-@media screen and (min-width: 450px) {
+@media screen and (width >= 450px) {
   .emberconf-announcement {
     padding-top: 3rem;
     margin-top: -5rem;
diff --git a/app/styles/components/ecosystem-icons.css b/app/styles/components/ecosystem-icons.css
index 17c2254bc..6cea0710d 100644
--- a/app/styles/components/ecosystem-icons.css
+++ b/app/styles/components/ecosystem-icons.css
@@ -17,7 +17,7 @@
   margin: auto;
 }
 
-@media (max-width: 1007px) {
+@media (width <= 1007px) {
   .ecosystem-icons {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     width: inherit;
diff --git a/app/styles/components/homepage-hero-callout.css b/app/styles/components/homepage-hero-callout.css
index 7cc7ffd3c..e9ac8c3dd 100644
--- a/app/styles/components/homepage-hero-callout.css
+++ b/app/styles/components/homepage-hero-callout.css
@@ -21,7 +21,7 @@
 }
 
 .hero-callout-text > a:link {
-  color: #74B0CE;
+  color: #74b0ce;
   background: none;
   text-decoration: underline;
 }
diff --git a/app/styles/components/homepage-image-grid.css b/app/styles/components/homepage-image-grid.css
index 4699287d2..5ec8d8828 100644
--- a/app/styles/components/homepage-image-grid.css
+++ b/app/styles/components/homepage-image-grid.css
@@ -27,13 +27,11 @@
 }
 
 .homepage-image-grid__img-tall-bottom {
-  grid-row-start: 2;
-  grid-row-end: 5;
+  grid-row: 2 / 5;
 }
 
 .homepage-image-grid__img-tall-top {
-  grid-row-start: 1;
-  grid-row-end: 4;
+  grid-row: 1 / 4;
 }
 
 .homepage-image-grid__img-short {
@@ -45,13 +43,13 @@
   width: max-content;
 }
 
-[class*=well-] img {
-  width: auto;
-}
-
-/* IN ht estyleguides */
-
 img {
   max-width: 100%;
   height: auto;
 }
+
+[class*="well-"] img {
+  width: auto;
+}
+
+/* IN ht estyleguides */
diff --git a/app/styles/components/survey-section.css b/app/styles/components/survey-section.css
index 10f91399f..b14899894 100644
--- a/app/styles/components/survey-section.css
+++ b/app/styles/components/survey-section.css
@@ -8,10 +8,7 @@
   align-items: flex-start;
   display: grid;
   grid-column-gap: 0.5rem;
-  grid-template-areas:
-    "hyperlink title";
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr;
+  grid-template: "hyperlink title" 1fr / auto 1fr;
 }
 
 .survey-section__title-container__title {
diff --git a/app/styles/components/surveys.css b/app/styles/components/surveys.css
index 4a50eb304..12fbffb36 100644
--- a/app/styles/components/surveys.css
+++ b/app/styles/components/surveys.css
@@ -2,7 +2,7 @@
   height: 160px;
 }
 
- /* TODO this could be better, probably */
+/* TODO this could be better, probably */
 .survey-sponsor-link {
   background: transparent !important;
 }
diff --git a/app/styles/components/terminal-code.css b/app/styles/components/terminal-code.css
index 4828140f0..99811f0cb 100644
--- a/app/styles/components/terminal-code.css
+++ b/app/styles/components/terminal-code.css
@@ -13,15 +13,15 @@
 }
 
 .terminal-code .dot.red {
-  background-color: rgb(238, 90, 90);
+  background-color: rgb(238 90 90);
 }
 
 .terminal-code .dot.yellow {
-  background-color: rgb(250, 208, 109);
+  background-color: rgb(250 208 109);
 }
 
 .terminal-code .dot.green {
-  background-color: rgb(116, 173, 111);
+  background-color: rgb(116 173 111);
 }
 
 .terminal-code code {
diff --git a/app/styles/legacy/form.css b/app/styles/legacy/form.css
index 54d2b364b..9eaeb1c03 100644
--- a/app/styles/legacy/form.css
+++ b/app/styles/legacy/form.css
@@ -1,9 +1,8 @@
-
 .tomster-form {
   margin-top: 1.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form {
     padding: 0.5em;
   }
@@ -40,14 +39,14 @@
   color: #c7341f;
 }
 
-.tomster-form input[type=radio] {
+.tomster-form input[type="radio"] {
   display: inline-block;
   margin-right: 20px;
 }
 
-.tomster-form input[type=text],
-.tomster-form input[type=email],
-.tomster-form input[type=file],
+.tomster-form input[type="text"],
+.tomster-form input[type="email"],
+.tomster-form input[type="file"],
 .tomster-form textarea {
   border: none;
   margin: 0;
@@ -58,10 +57,10 @@
   outline: 0;
   width: 100%;
   border-radius: 6px;
-  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgb(0 0 0 / 10%);
 }
 
-.tomster-form input[type=file] {
+.tomster-form input[type="file"] {
   padding: 15px 10px;
   background-color: transparent;
   cursor: pointer;
@@ -72,21 +71,21 @@
   height: 100px;
 }
 
-.tomster-form input[type=text]:focus,
-.tomster-form input[type=email]:focus,
-.tomster-form input[type=file]:focus,
+.tomster-form input[type="text"]:focus,
+.tomster-form input[type="email"]:focus,
+.tomster-form input[type="file"]:focus,
 .tomster-form textarea:focus {
   border-color: #888;
 }
 
-.tomster-form input[type=text].error,
-.tomster-form input[type=email].error,
-.tomster-form input[type=file].error,
+.tomster-form input[type="text"].error,
+.tomster-form input[type="email"].error,
+.tomster-form input[type="file"].error,
 .tomster-form textarea.error {
   border-color: #c7341f;
 }
 
-.tomster-form input[type=file]:focus {
+.tomster-form input[type="file"]:focus {
   border-color: #ddd;
 }
 
@@ -101,7 +100,7 @@
   margin-top: 0.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form fieldset .choice {
     text-align: left;
   }
@@ -120,7 +119,7 @@
   width: calc(100% - 20px);
 }
 
-.tomster-form input[type=submit] {
+.tomster-form input[type="submit"] {
   margin-top: 2em;
 }
 
@@ -130,7 +129,7 @@
   line-height: 40px;
 }
 
-.tomster-form .inline-field input[type=text] {
+.tomster-form .inline-field input[type="text"] {
   width: auto;
 }