diff --git a/apps/website/src/components/Button.css b/apps/website/src/components/Button.css
index 41d5cafbc..4eabe906a 100644
--- a/apps/website/src/components/Button.css
+++ b/apps/website/src/components/Button.css
@@ -7,14 +7,14 @@ a.button {
     text-decoration: none;
     text-align: center;    
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
-}
 
-a.button.outline {
-    border: 1px solid var(--brand-1);
-    color: var(--brand-1);
-    background-color: transparent;
-}
+    &.outline {
+        border: 1px solid var(--brand-1);
+        color: var(--brand-1);
+        background-color: transparent;
+    }
 
-a.button .text {
-    vertical-align: middle;
+    .text {
+        vertical-align: middle;
+    }
 }
\ No newline at end of file
diff --git a/apps/website/src/components/DownloadButton.css b/apps/website/src/components/DownloadButton.css
index dca728f39..854f65530 100644
--- a/apps/website/src/components/DownloadButton.css
+++ b/apps/website/src/components/DownloadButton.css
@@ -1,11 +1,13 @@
-.download-button .platform {
-    font-size: 0.75em;
-    opacity: 0.75;
-}
-
-.download-button.big {
-    padding: 1em 2em;
-    margin: 1em 0;
+.download-button {
+    &.big {
+        padding: 1em 2em;
+        margin: 1em 0;
+    }
+    
+    .platform {
+        font-size: 0.75em;
+        opacity: 0.75;
+    }
 }
 
 @media (min-width: 720px) {
diff --git a/apps/website/src/components/Footer.css b/apps/website/src/components/Footer.css
index 32e6f2468..6f62e19d2 100644
--- a/apps/website/src/components/Footer.css
+++ b/apps/website/src/components/Footer.css
@@ -4,26 +4,26 @@ footer {
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     color: var(--muted-color);
     font-size: 0.8em;
-}
 
-footer .content-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    .content-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 }
 
 .social-buttons {
     display: flex;
     gap: 1em;
-}
 
-.social-buttons a.social-button {
-    color: var(--muted-color);
-    transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
-    opacity: 0.7;
-}
+    a.social-button {
+        color: var(--muted-color);
+        transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
+        opacity: 0.7;
 
-.social-buttons a.social-button:hover {
-    color: var(--brand-1);
-    opacity: 1;
+        &:hover {
+            color: var(--brand-1);
+            opacity: 1;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/website/src/components/Header.css b/apps/website/src/components/Header.css
index b7a402619..96bb84ae3 100644
--- a/apps/website/src/components/Header.css
+++ b/apps/website/src/components/Header.css
@@ -8,53 +8,56 @@ header {
     z-index: 1000;
     --gap: 1.25em;
     font-size: 0.8em;
+
+    .content-wrapper {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        gap: var(--gap);
+    }
+
+    a.banner {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        text-decoration: none;
+        color: inherit;
+        
+        &:hover { text-decoration: none;}
+    }
+
+    img {
+        width: 32px;
+        height: 32px;
+    }
+
+    img+span {
+        font-size: 1.3em;
+    }
+
+    nav {
+        flex-grow: 1;
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--gap);
+
+        a {
+            text-decoration: none;
+            color: inherit;
+
+            &.active {
+                color: var(--brand-1);
+            }
+        }
+    }
 }
 
-header .content-wrapper {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    gap: var(--gap);
-}
-
-header a.banner {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    text-decoration: none;
-    color: inherit;
-}
 
 header > .content-wrapper,
 section.hero-section > .content-wrapper {
     min-width: 80vw;
 }
 
-header img {
-    width: 32px;
-    height: 32px;
-}
-
-header img+span {
-    font-size: 1.3em;
-}
-
-header nav {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--gap);
-}
-
-header nav a {
-    text-decoration: none;
-    color: inherit;
-}
-
-header nav a.active {
-    color: var(--brand-1);
-}
-
 @media (max-width: 719px) {
     :root {
         --header-height: 35px;
@@ -67,41 +70,41 @@ header nav a.active {
         right: 0;
         min-height: var(--header-height);
         display: flex;
+
+        .content-wrapper {
+            display: block;
+        }
+
+        .first-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-grow: 1;
+            align-self: stretch;
+        }
+
+        .menu-toggle {
+            color: inherit;
+        }
+
+        nav {
+            flex-direction: column;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 200ms ease-in;        
+
+            &.mobile-shown {
+                display: flex;
+                max-height: 100vh;
+                padding: 2em 0;
+            }
+        }
     }
 
     header + main {
         margin-top: var(--header-height);
     }
-
-    header .content-wrapper {
-        display: block;
-    }
     
-    header .first-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-grow: 1;
-        align-self: stretch;
-    }
-
-    header .menu-toggle {
-        color: inherit;
-    }
-
-    header nav {
-        flex-direction: column;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 200ms ease-in;        
-    }
-
-    header nav.mobile-shown {
-        display: flex;
-        max-height: 100vh;
-        padding: 2em 0;
-    }
-
     header nav a {
         font-size: 1.25em;
         padding: 0.5em 0;
@@ -111,14 +114,14 @@ header nav a.active {
     header .social-buttons {
         justify-content: space-between;
         padding-top: 1em;
-    }
 
-    header .social-buttons a {
-        border-bottom: unset;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-size: 1em;
+        a {
+            border-bottom: unset;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 1em;
+        }
     }
 
 }
@@ -126,10 +129,10 @@ header nav a.active {
 @media (min-width: 720px) {
     header {
         font-size: inherit;
-    }
 
-    header img {
-        width: 48px;
-        height: 48px;
+        img {
+            width: 48px;
+            height: 48px;
+        }
     }
 }
\ No newline at end of file
diff --git a/apps/website/src/pages/GetStarted/get-started.css b/apps/website/src/pages/GetStarted/get-started.css
index 3d43c6e86..7b018452f 100644
--- a/apps/website/src/pages/GetStarted/get-started.css
+++ b/apps/website/src/pages/GetStarted/get-started.css
@@ -6,30 +6,42 @@
     grid-column: 1 / 4;
 }
 
-.download-card h3 {
-    color: var(--accent-color);
-    font-size: 1.5em;
-    position: relative;
-}
+.download-card {
+    h3 {
+        color: var(--accent-color);
+        font-size: 1.5em;
+        position: relative;
 
-.download-card h3 a.more-info {
-    margin-left: 0.5em;
-    right: 0;
-}
+        a.more-info {
+            margin-left: 0.5em;
+            right: 0;
 
-.download-card h3 a.more-info .bx {
-    vertical-align: sub;
-}
+            .bx {
+                vertical-align: sub;
+            }
+        }
+    }
 
-.download-card .card-content-inner {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-}
+    .card-content-inner {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+    }
 
-.download-card a:not(.button) {
-    color: var(--accent-color);
-    text-decoration: none;
+    a:not(.button) {
+        color: var(--accent-color);
+    }
+
+    .quick-start {
+        border: 1px solid var(--muted-color);
+        padding: 0.5em;
+        border-radius: 6px;
+
+        code {
+            text-wrap: wrap;
+            color: var(--muted-color);
+        }
+    }
 }
 
 .download-options {
@@ -39,74 +51,69 @@
     align-items: center;
     display: flex;
     flex-direction: column;
+
+    .recommended-options {
+        align-self: stretch;
+        display: flex;
+        gap: 1em;
+
+        a.recommended {
+            display: block;
+            background: var(--accent-color);
+            color: var(--brand-foreground-color);
+            border-radius: calc(infinity * 1px);
+            margin: 1em 0;
+            flex-grow: 1;
+        }
+    }
+
+    .other-options {
+        display: flex;
+        gap: 0.5em 1em;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
 }
 
-.download-options .recommended-options {
-    align-self: stretch;
-    display: flex;
-    gap: 1em;
+.download-desktop {
+    .download-card:first-of-type { --accent-color: var(--brand-1); }
+    .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
+    .download-card:last-of-type { --accent-color: var(--brand-3); }
 }
 
-.download-options a.recommended {
-    display: block;
-    background: var(--accent-color);
-    color: var(--brand-foreground-color);
-    border-radius: calc(infinity * 1px);
-    margin: 1em 0;
-    flex-grow: 1;
-}
-
-.download-options .other-options {
-    display: flex;
-    gap: 0.5em 1em;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.download-desktop .download-card:first-of-type { --accent-color: var(--brand-1); }
-.download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
-.download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); }
-
 .download-server .download-card {
     --accent-color: var(--foreground-color);
     --brand-foreground-color: var(--background-color);
 }
 
-.download-card .quick-start {
-    border: 1px solid var(--muted-color);
-    padding: 0.5em;
-    border-radius: 6px;
-}
-
-.download-card .quick-start code {
-    text-wrap: wrap;
-    color: var(--muted-color);
-}
-
 .architecture-switch {
     display: flex;
     gap: 1em;
     justify-content: center;
     align-items: center;
     margin: 1em 0;
-}
 
-.architecture-switch a {
-    display: inline-block;
-    background: var(--card-background-color);
-    padding: 0.25em 0.5em;
-    text-decoration: none;
-    text-align: center;
-    min-width: 3em;
-    color: inherit;
-}
+    a {
+        display: inline-block;
+        background: var(--card-background-color);
+        padding: 0.25em 0.5em;
+        text-decoration: none;
+        text-align: center;
+        min-width: 3em;
+        color: inherit;
 
-.architecture-switch .toggle-wrapper {
-    border-radius: calc(infinity * 1px);
-    overflow: hidden;
-}
+        &.active {
+            background-color: var(--brand-1);
+            color: var(--brand-foreground-color);
+        }
 
-.architecture-switch a.active {
-    background-color: var(--brand-1);
-    color: var(--brand-foreground-color);
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    .toggle-wrapper {
+        border-radius: calc(infinity * 1px);
+        overflow: hidden;
+    }
 }
diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index f9d56bd07..07d258c14 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -1,127 +1,113 @@
 section.hero-section {
     position: relative;
-    background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));    
-}
 
-section.hero-section.dark {
-    color: var(--text-on-dark);
-    background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24);
-}
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background:
+            radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%),
+            radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%),
+            radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%),
+            radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%),
+            radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
 
-/* Extra colored spots */
-section.hero-section::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background:
-        radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%),
-        radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%),
-        radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%),
-        radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%),
-        radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
-}
-
-@media (prefers-color-scheme: light) {
-    /* Soft vignette for focus */
-    section.hero-section::after {
+        @media (prefers-color-scheme: dark) {
+            background:
+            radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%),
+            radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%),
+            radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%),
+            radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
+        }
+    }
+    &::after {
         content: "";
         position: absolute;
         inset: 0;
         background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
         pointer-events: none;
-    }
-}
 
-@media (prefers-color-scheme: dark) {
-    section.hero-section::before {
-        background:
-            radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%),
-            radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%),
-            radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%),
-            radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
+        @media (prefers-color-scheme: dark) {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+            opacity: 0.04;
+            pointer-events: none;
+        }
+    }
+    
+    &>.content-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
     }
 
-    /* Subtle noise for depth */
-    section.hero-section::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-        opacity: 0.04;
-        pointer-events: none;
+    .title-section {
+        flex-basis: 40%;
+        color: var(--muted-color);
+
+        h1 {
+            line-height: 1.1;
+            font-weight: 100;
+            color: var(--foreground-color);
+        }
     }
-}
 
-section.hero-section > .content-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-}
+    .screenshot {
+        position: relative;
+        width: 100%;
+        height: auto;
+        margin-bottom: 0;
+    }
 
-section.hero-section .title-section {
-    flex-basis: 40%;
-    color: var(--muted-color);
-}
+    .download-wrapper {    
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+    }
 
-section.hero-section .title-section h1 {
-    line-height: 1.1;
-    font-weight: 100;
-    color: var(--foreground-color);
-}
+    .download-button {
+        margin-bottom: 0.25em;
+    }
 
-section.hero-section .screenshot {
-    position: relative;
-    width: 100%;
-    height: auto;
-    margin-bottom: 0;
-}
+    .more-download-options {
+        display: inline-block;
+        color: var(--brand-1);
+        font-size: 0.8em;
+        text-align: center;
+    }
 
-section.hero-section .download-wrapper {    
-    display: flex;
-    flex-direction: column;
-    align-content: center;
-}
+    .additional-options {
+        margin-top: 1em;
+        display: flex;
+        gap: 1em;
+        font-size: 0.85em;
+        align-items: center;
 
-section.hero-section .download-button {
-    margin-bottom: 0.25em;
-}
-
-section.hero-section .more-download-options {
-    display: inline-block;
-    color: var(--brand-1);
-    font-size: 0.8em;
-    text-align: center;
-}
-
-section.hero-section .additional-options {
-    margin-top: 1em;
-    display: flex;
-    gap: 1em;
-    font-size: 0.85em;
-    align-items: center;
-}
-
-section.hero-section .additional-options a {
-    flex-grow: 1;
+        a {
+            flex-grow: 1;
+        }
+    }
 }
 
 @media (max-width: 719px) {
     section.hero-section {
-        padding-bottom: 0;        
-    }
+        padding-bottom: 0; 
+        
+        .content-wrapper {
+            width: 100%;
+        }
 
-    section.hero-section .content-wrapper {
-        width: 100%;
-    }
+        .title-section {
+            max-width: 90%;
+        }    
 
-    section.hero-section .title-section {
-        max-width: 90%;
-    }    
-
-    section.hero-section .screenshot {
-        margin-top: 2em;
+        .screenshot {
+            margin-top: 2em;
+        }
     }
 }
 
@@ -152,93 +138,96 @@ section:not(.accented) + section:not(.accented) {
 section.final-cta {
     text-align: center;
     padding: 6em 0;
-}
 
-section.final-cta h2 {
-    margin-bottom: 0;
-}
+    h2 {
+        margin-bottom: 0;
+    }
 
-section.final-cta p {
-    color: var(--muted-color);
+    p {
+        color: var(--muted-color);
+    }
+
+    .buttons {
+        display: flex;
+        align-items: center;
+        gap: 1em;
+        justify-content: center;
+        margin-top: 2em;
+
+        .button {
+            padding: 0.75em 2em;
+        }
+    }
 }
 
 section.final-cta .buttons {
     display: flex;
-    align-items: center;
-    gap: 1em;
-    justify-content: center;
-    margin-top: 2em;
-}
-
-section.final-cta .buttons .button {
-    padding: 0.75em 2em;
+    gap: 2em;
 }
 
 .list-with-screenshot {
     display: flex;
     gap: 2em;
-}
-
-.list-with-screenshot ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.list-with-screenshot ul li {
-    margin-bottom: 1em;
-}
-
-.list-with-screenshot ul li .card {
-    border: 1px solid transparent;
-}
-
-.list-with-screenshot ul li.selected .card {
-    border: 1px solid var(--brand-1);
-}
-
-.list-with-screenshot ul li:last-of-type {
-    margin-bottom: 0;
-}
-
-.list-with-screenshot .details {
-    flex-basis: 50%;
-    flex-shrink: 0;
-}
-
-.list-with-screenshot.horizontal {
-    flex-direction: column-reverse;
-}
-
-.list-with-screenshot.horizontal ul {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 1em;
-}
-
-.list-with-screenshot.horizontal li {
-    margin: 0;
-}
-
-.list-with-screenshot.horizontal .card {    
-    height: 100%;    
-}
-
-
-.list-with-screenshot.horizontal h3 {
-    color: var(--brand-1);
-}
-
-
-.list-with-screenshot.horizontal .details {
-    max-height: 35vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.list-with-screenshot.horizontal .details img {
-    height: 100%;
-    width: auto;
-    object-fit: contain;
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            margin-bottom: 1em;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }            
+
+            .card {
+                border: 1px solid transparent;
+            }
+
+            &.selected .card {
+                border: 1px solid var(--brand-1);
+            }            
+        }
+    }
+
+    .details {
+        flex-basis: 50%;
+        flex-shrink: 0;
+    }
+
+    &.horizontal {
+        flex-direction: column-reverse;
+
+        ul {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 1em;
+        }
+
+        li {
+            margin: 0;
+        }
+
+        .card {
+            height: 100%;
+        }
+
+        h3 {
+            color: var(--brand-1);
+        }
+
+        .details {
+            max-height: 35vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+
+            img {
+                height: 100%;
+                width: auto;
+                object-fit: contain;
+            }
+        }
+    }
 }
diff --git a/apps/website/src/pages/SupportUs/SupportUs.css b/apps/website/src/pages/SupportUs/SupportUs.css
index 7928a9082..2159d9743 100644
--- a/apps/website/src/pages/SupportUs/SupportUs.css
+++ b/apps/website/src/pages/SupportUs/SupportUs.css
@@ -1,23 +1,21 @@
 section.donate {
     background: var(--background-color);
-}
 
-section.donate ul.donate-buttons {
-    list-style-type: none;
-    display: flex;
-    gap: 1em;
-    padding: 0;
-    flex-direction: column;
-}
+    ul.donate-buttons {
+        list-style-type: none;
+        display: flex;
+        gap: 1em;
+        padding: 0;
+        flex-direction: column;
 
-section.donate h3 {
-    font-size: 1.5em;
-    color: var(--brand-1);
-}
+        @media (min-width: 720px) {
+            gap: 0 1em;
+            flex-direction: row;
+        }
+    }
 
-@media (min-width: 720px) {
-    section.donate ul {
-        gap: 0 1em;
-        flex-direction: row;
+    h3 {
+        font-size: 1.5em;
+        color: var(--brand-1);
     }
 }
diff --git a/apps/website/src/pages/_404.css b/apps/website/src/pages/_404.css
index 8c9bdef59..8eabd31e6 100644
--- a/apps/website/src/pages/_404.css
+++ b/apps/website/src/pages/_404.css
@@ -1,9 +1,9 @@
 section.section-404 {
     text-align: center;
     background: var(--background-color);
-}
 
-section.section-404 h2 {
-    color: var(--brand-3);
-    margin: 1em;
+    h2 {
+        color: var(--brand-3);
+        margin: 1em;
+    }
 }
\ No newline at end of file
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index 36588c45d..f2330619a 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -45,10 +45,10 @@ body {
 a {
     color: var(--brand-3);
     text-decoration: none;
-}
 
-a:not(.button):hover {
+    &:not(.button):hover {
     text-decoration: underline;
+    }
 }
 
 .content-wrapper {
@@ -61,18 +61,18 @@ section {
     padding: 1em 0;
     justify-content: center;
     align-items: stretch;
-}
 
-section.fill {
-    flex-grow: 1;
-    display: flex;
-}
+    &.fill {
+        flex-grow: 1;
+        display: flex;
+    }
 
-section h2 {
-    text-align: center;
-    font-weight: 100;
-    margin-top: 0;
-    margin-bottom: 1em;
+    h2 {
+        text-align: center;
+        font-weight: 100;
+        margin-top: 0;
+        margin-bottom: 1em;
+    }
 }
 
 img {
@@ -88,44 +88,44 @@ img {
     overflow: hidden;
     display: flex;
     flex-direction: column;
-}
 
-.card-content {
-    margin: 0;
-    padding: 1em;
-    color: var(--muted-color);
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
+    h3 {
+        font-size: 1.1rem;
+        font-weight: 300;
+        margin: 0;
+        color: var(--brand-1);
+        margin-bottom: 0.5em;
 
-.card-content .more-info-container {
-    margin-top: 0.5em;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-}
+        &> span {
+            vertical-align: middle;
+        }
+    }
 
-.card-content .more-info {
-    font-size: 0.9em;
-}
+    &> .image {
+        height: 200px;
+        object-fit: cover;
+    }
 
-.card h3 {
-    font-size: 1.1rem;
-    font-weight: 300;
-    margin: 0;
-    color: var(--brand-1);
-    margin-bottom: 0.5em;
-}
-
-.card-content h3 > span {
-    vertical-align: middle;
-}
-
-.card > .image {
-    height: 200px;
-    object-fit: cover;
+    .card-content {
+        margin: 0;
+        padding: 1em;
+        color: var(--muted-color);
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    
+        .more-info-container {
+            margin-top: 0.5em;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+    
+            .more-info {
+                font-size: 0.9em;
+            }
+        }
+    }
 }
 
 .bx {
@@ -133,10 +133,10 @@ img {
     width: 24px;
     height: 24px;
     vertical-align: middle;
-}
 
-.bx svg {
-    fill: currentColor;
+    svg {
+        fill: currentColor;
+    }
 }
 
 @media (max-width: 719px) {
@@ -153,11 +153,11 @@ img {
 @media (min-width: 720px) {
     section {
         padding: 3em 0;
-    }
 
-    section h2 {
-        margin-bottom: 2em;
-    }
+        h2 {
+            margin-bottom: 2em;
+        }
+    }    
 
     .grid-4-cols {
         display: grid;