From b7ef5869f7c31e01bc6942b929f44269e3f273ca Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Tue, 19 May 2020 12:22:56 -0700
Subject: [PATCH 1/7] add svg, update padding and text variables, add borders
 to framework to align with design

---
 .../content-placement-container.styles.ts     | 112 +++++++++++++++++-
 .../content-placement-container.template.ts   |  30 ++---
 .../content-placement.styles.ts               |  32 +----
 .../content-placement.template.ts             |  16 +--
 .../content-placement/content-placement.ts    |   3 +-
 sites/fast-website/src/app/css/style.css      |   1 -
 .../src/app/data/community.data.ts            |  16 +--
 .../src/app/data/framework.data.ts            |  27 ++---
 .../fast-website/src/app/svg/icon-discord.svg |   3 +
 .../fast-website/src/app/svg/icon-twitter.svg |   3 +
 10 files changed, 151 insertions(+), 92 deletions(-)
 create mode 100644 sites/fast-website/src/app/svg/icon-discord.svg
 create mode 100644 sites/fast-website/src/app/svg/icon-twitter.svg

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index 97831d7336e..d64c146787e 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -6,15 +6,109 @@ export const ContentPlacementContainerStyles = css`
         contain: none;
         font-family: var(--body-font);
     }
-    .container {
-        display: flex;
-        flex-wrap: wrap;
+
+    .framework_container,
+    .community_container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
         justify-content: center;
     }
+
+    .framework_ContentPlacement {
+        padding: 0 calc(var(--design-unit) * 2px);
+    }
+
+    .framework_ContentPlacement4,
+    .framework_ContentPlacement5,
+    .framework_ContentPlacement6 {
+        border-top: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+    }
+
+    .framework_ContentPlacement1,
+    .framework_ContentPlacement2,
+    .framework_ContentPlacement4,
+    .framework_ContentPlacement5 {
+        border-right: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+    }
+
+    .framework_ContentPlacement1,
+    .framework_ContentPlacement2,
+    .framework_ContentPlacement3 {
+        border-bottom: calc(var(--outline-width) * 0.5px) solid
+            var(--neutral-outline-rest);
+    }
+
+    .framework_ContentPlacement2,
+    .framework_ContentPlacement3,
+    .framework_ContentPlacement5,
+    .framework_ContentPlacement6 {
+        border-left: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+    }
+
+    @media screen and (max-width: 1000px) {
+        .framework_container {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .framework_ContentPlacement {
+            border: none;
+        }
+
+        .framework_ContentPlacement2,
+        .framework_ContentPlacement4,
+        .framework_ContentPlacement6 {
+            border-left: calc(var(--outline-width) * 0.5px) solid
+                var(--neutral-outline-rest);
+        }
+
+        .framework_ContentPlacement1,
+        .framework_ContentPlacement3,
+        .framework_ContentPlacement5 {
+            border-right: calc(var(--outline-width) * 0.5px) solid
+                var(--neutral-outline-rest);
+        }
+
+        .framework_ContentPlacement1,
+        .framework_ContentPlacement2,
+        .framework_ContentPlacement3,
+        .framework_ContentPlacement4 {
+            border-bottom: calc(var(--outline-width) * 0.5px) solid
+                var(--neutral-outline-rest);
+        }
+
+        .framework_ContentPlacement3,
+        .framework_ContentPlacement4,
+        .framework_ContentPlacement5,
+        .framework_ContentPlacement6 {
+            border-top: calc(var(--outline-width) * 0.5px) solid
+                var(--neutral-outline-rest);
+        }
+    }
+
+    @media screen and (max-width: 700px) {
+        .framework_container,
+        .community_container {
+            grid-template-columns: 1fr;
+        }
+
+        .framework_ContentPlacement {
+            border: none;
+        }
+
+        .framework_ContentPlacement1,
+        .framework_ContentPlacement2,
+        .framework_ContentPlacement3,
+        .framework_ContentPlacement4,
+        .framework_ContentPlacement5 {
+            border-bottom: calc(var(--outline-width) * 1px) solid
+                var(--neutral-outline-rest);
+        }
+    }
+
     /* This creates the blur and background color changes on hover */
     /* start */
     .container:hover site-content-placement {
-        filter: blur(2px);
+        filter: blur(1px);
     }
     .container:hover site-content-placement:hover {
         /* background: linear-gradient(349.8deg, rgba(143, 68, 95, 0.3) 20.91%, rgba(148, 81, 73, 0.3) 99.75%); */
@@ -23,4 +117,14 @@ export const ContentPlacementContainerStyles = css`
         filter: blur(0);
     }
     /* end */
+
+    .icon {
+        fill: currentColor;
+    }
+
+    h3 {
+        margin-top: 0;
+        margin-bottom: calc(var(--design-unit) * 5px);
+        font-size: var(--type-ramp-plus-2-font-size);
+    }
 `;
diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
index 1b31bee6a12..eb1afb06769 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
@@ -1,29 +1,23 @@
 import { html, repeat, when } from "@microsoft/fast-element";
 import { ContentPlacementContainer } from "./content-placement-container";
+import { CommunityContentPlacementData } from "../../data/community.data";
 
 export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
-    <div class="container">
+    <div
+        class="container ${x =>
+            x.section === "framework" ? "framework_container" : ""} ${x =>
+            x.section === "community" ? "community_container" : ""}"
+    >
         ${when(
             x => x.section === "framework",
             html<ContentPlacementContainer>`
                 ${repeat(
                     x => x.frameworkContentPlacementData,
-                    html`<site-content-placement divider>
+                    html`<site-content-placement
+                        class="framework_ContentPlacement ${x => x.name}"
+                    >
                         <h3>${x => x.header}</h3>
                         <p slot="body">${x => x.body}</p>
-                        <span slot="compatibility"
-                            ><img
-                                src=${x => x.compatibilityImageSrc}
-                                alt=${x => x.compatibilityImageAlt}
-                            />
-                            ${x => x.compatibilityText}</span
-                        >
-                        <fast-anchor
-                            slot="action"
-                            appearance="lightweight"
-                            href=${x => x.actionLink}
-                            >${x => x.actionText}</fast-anchor
-                        >
                     </site-content-placement>`
                 )}
             `
@@ -33,10 +27,8 @@ export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>
             html<ContentPlacementContainer>`
                 ${repeat(
                     x => x.communityContentPlacementData,
-                    html`<site-content-placement>
-                        <div slot="icon">
-                            <img src=${x => x.iconSrc} alt=${x => x.iconAlt} />
-                        </div>
+                    html`<site-content-placement icon>
+                        <div slot="icon" :innerHTML=${x => x.icon}></div>
                         <h3>${x => x.header}</h3>
                         <p slot="body">${x => x.body}</p>
                         <fast-anchor
diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
index 617fd7d64fc..fd418726d1d 100644
--- a/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
@@ -8,13 +8,9 @@ export const ContentPlacementStyles = css`
         box-sizing: border-box;
     }
 
-    :host([hidden]) {
-        display: none;
-    }
-
     fast-card {
         background: transparent;
-        padding: 0 calc(var(--design-unit) * 5px) calc(var(--design-unit) * 3px);
+        padding: calc(var(--design-unit) * 5px);
         text-align: left;
         display: flex;
         flex-direction: column;
@@ -22,36 +18,20 @@ export const ContentPlacementStyles = css`
 
     fast-card ::slotted([slot="body"]) {
         flex: 1 1 auto;
+        margin: 0;
+        font-size: var(--type-ramp-base-font-size);
     }
 
-    fast-card:hover .contentPlacement_footer__hoverVisible {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .contentPlacement_footer__hoverVisible {
-        visibility: hidden;
-    }
-
-    fast-card:hover .contentPlacement_footer__hoverVisible {
-        visibility: visible;
-    }
-
-    fast-card:hover .contentPlacement_divider {
-        visibility: visible;
+    fast-card ::slotted([slot="action"]) {
+        margin-top: calc(var(--design-unit) * 2px);
     }
 
     fast-card:hover .contentPlacement_icon {
         visibility: visible;
     }
 
-    .contentPlacement_divider {
-        visibility: hidden;
-    }
-
     fast-card .contentPlacement_icon {
         visibility: hidden;
-        margin-top: calc(var(--design-unit) * 4px);
+        margin-bottom: calc(var(--design-unit) * 5px);
     }
 `;
diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
index 49e35e6ca01..df923cfd885 100644
--- a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
+++ b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
@@ -2,22 +2,10 @@ import { html, when } from "@microsoft/fast-element";
 import { ContentPlacement } from "./content-placement";
 
 export const ContentPlacementTemplate = html<ContentPlacement>`<fast-card>
-    <div class=${x => (x.divider ? "" : "contentPlacement_icon")}>
+    <div class=${x => (x.icon ? "contentPlacement_icon" : "")}>
         <slot name="icon"></slot>
     </div>
     <slot></slot>
     <slot name="body"></slot>
-    ${when(
-        x => x.divider,
-        html`<fast-divider class="contentPlacement_divider"></fast-divider>`
-    )}
-    <div
-        class=${x =>
-            x.divider
-                ? "contentPlacement_footer__hoverVisible"
-                : "contentPlacement_footer__alwaysVisible"}
-    >
-        <slot name="action"></slot>
-        <slot name="compatibility"></slot>
-    </div>
+    ${when(x => x.icon, html`<slot name="action"></slot>`)}
 </fast-card> `;
diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.ts b/sites/fast-website/src/app/components/content-placement/content-placement.ts
index d118ec334b1..62612755ddb 100644
--- a/sites/fast-website/src/app/components/content-placement/content-placement.ts
+++ b/sites/fast-website/src/app/components/content-placement/content-placement.ts
@@ -1,5 +1,6 @@
 import { attr, FASTElement } from "@microsoft/fast-element";
 
 export class ContentPlacement extends FASTElement {
-    @attr({ mode: "boolean" }) divider: boolean = false;
+    @attr({ mode: "boolean" })
+    public icon: boolean = false;
 }
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
index 0f96465cc68..37716a2c32e 100644
--- a/sites/fast-website/src/app/css/style.css
+++ b/sites/fast-website/src/app/css/style.css
@@ -33,7 +33,6 @@ body {
 
 .section {
   grid-column: 2;
-  --card-width: 400px;
   color: var(--neutral-foreground-rest);
 }
 
diff --git a/sites/fast-website/src/app/data/community.data.ts b/sites/fast-website/src/app/data/community.data.ts
index 5712365a5cf..abfa7b381dd 100644
--- a/sites/fast-website/src/app/data/community.data.ts
+++ b/sites/fast-website/src/app/data/community.data.ts
@@ -1,10 +1,13 @@
+import DiscordIcon from "svg/icon-discord.svg";
+import GithubIcon from "svg/icon-github.svg";
+import TwitterIcon from "svg/icon-twitter.svg";
+
 export interface CommunityContentPlacementData {
     actionLink: string;
     actionText: string;
     body: string;
     header: string;
-    iconAlt: string;
-    iconSrc: string;
+    icon: string;
 }
 
 export const communityContentPlacementData: CommunityContentPlacementData[] = [
@@ -14,8 +17,7 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Join our active community on Discord. Follow the latest updates and contributions, ask questions, give feedback, or keep up on our reading list.",
         header: "Discord",
-        iconAlt: "Discord",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: DiscordIcon,
     },
     {
         actionLink: "https://twitter.com/fast_dna",
@@ -23,8 +25,7 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Follow along as we share out the latest happenings on Twitter. You will find important updates, announcements, and sneak peeks.",
         header: "Twitter",
-        iconAlt: "Twitter",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: GithubIcon,
     },
     {
         actionLink: "https://github.com/microsoft/fast-dna",
@@ -32,7 +33,6 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Explore the FAST repository on Github and try out our components, utilities, and tools. Or, mix-and-match with your own solutions.",
         header: "Github",
-        iconAlt: "Github",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: TwitterIcon,
     },
 ];
diff --git a/sites/fast-website/src/app/data/framework.data.ts b/sites/fast-website/src/app/data/framework.data.ts
index 7459ee68524..2e007e94ac1 100644
--- a/sites/fast-website/src/app/data/framework.data.ts
+++ b/sites/fast-website/src/app/data/framework.data.ts
@@ -1,57 +1,46 @@
 export interface FrameworkContentPlacementData {
-    actionLink?: string;
-    actionText?: string;
     body?: string;
-    compatibilityImageAlt?: string;
-    compatibilityImageSrc?: string;
-    compatibilityText?: string;
-    divider?: boolean;
     header?: string;
+    name?: string;
 }
 
-const frameworkContentPlacementReusableData: FrameworkContentPlacementData = {
-    actionLink: "#",
-    actionText: "Learn More",
-    compatibilityImageAlt: "Smiley face",
-    compatibilityImageSrc: "https://via.placeholder.com/16",
-    compatibilityText: "No issues!",
-};
+const prefix: string = "framework_ContentPlacement";
 
 export const frameworkContentPlacementData: FrameworkContentPlacementData[] = [
     {
         body:
             "Angular's default binding syntax will always set properties on an element. This works well for rich data, like objects and arrays, and also works well for primitive values so long as the Custom Element author has mapped any exposed attributes to corresponding properties.",
         header: "Angular 8.2.14",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}1`,
     },
     {
         body:
             "DIO uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, DIO will use properties, otherwise it will fallback to attributes.",
         header: "DIO",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}2`,
     },
     {
         body:
             "hyperHTML will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hyperHTML 2.32.2",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}3`,
     },
     {
         body:
             "Dojo will pass data as attributes only when the data is a type of string, otherwise it is set as a property.",
         header: "Dojo 6.0.4",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}4`,
     },
     {
         body:
             "Hybrids will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hybrids 4.1.7",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}5`,
     },
     {
         body:
             "AngularJS can declaratively pass data to attributes using ng-attr, or to properties using ng-prop.",
         header: "AngularJS (1.x) 1.7.9",
-        ...frameworkContentPlacementReusableData,
+        name: `${prefix}6`,
     },
 ];
diff --git a/sites/fast-website/src/app/svg/icon-discord.svg b/sites/fast-website/src/app/svg/icon-discord.svg
new file mode 100644
index 00000000000..7634318a8b3
--- /dev/null
+++ b/sites/fast-website/src/app/svg/icon-discord.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-discord" width="16" height="17" viewBox="0 0 20 23" >
+<path d="M12.6367 10.6302C12.6367 11.3019 12.1469 11.8525 11.5265 11.8525C10.917 11.8525 10.4163 11.3019 10.4163 10.6302C10.4163 9.95851 10.9061 9.40793 11.5265 9.40793C12.1469 9.40793 12.6367 9.95851 12.6367 10.6302ZM7.55374 9.40793C6.93333 9.40793 6.44354 9.95851 6.44354 10.6302C6.44354 11.3019 6.94422 11.8525 7.55374 11.8525C8.17415 11.8525 8.66395 11.3019 8.66395 10.6302C8.67483 9.95851 8.17415 9.40793 7.55374 9.40793ZM19.0476 2.43758V22.1924C16.3055 19.7409 17.1825 20.5524 13.9973 17.5565L14.5741 19.5937H2.23129C1.00136 19.5937 0 18.5806 0 17.3253V2.43758C0 1.18226 1.00136 0.169189 2.23129 0.169189H16.8163C18.0463 0.169189 19.0476 1.18226 19.0476 2.43758ZM15.9456 12.8766C15.9456 9.33085 14.3782 6.45682 14.3782 6.45682C12.8109 5.26757 11.3197 5.3006 11.3197 5.3006L11.1673 5.47679C13.0177 6.04939 13.8775 6.87526 13.8775 6.87526C11.292 5.44164 8.25493 5.44139 5.74694 6.55592C5.34422 6.74312 5.10476 6.87526 5.10476 6.87526C5.10476 6.87526 6.00816 6.00534 7.96735 5.43274L7.8585 5.3006C7.8585 5.3006 6.36735 5.26757 4.8 6.45682C4.8 6.45682 3.23265 9.33085 3.23265 12.8766C3.23265 12.8766 4.14694 14.4733 6.55238 14.5504C6.55238 14.5504 6.9551 14.0548 7.28163 13.6364C5.89932 13.218 5.37687 12.337 5.37687 12.337C5.53699 12.4504 5.80102 12.5974 5.82313 12.6123C7.66029 13.6532 10.2699 13.9942 12.615 12.9977C12.9959 12.8546 13.4204 12.6453 13.8667 12.348C13.8667 12.348 13.3224 13.251 11.8966 13.6584C12.2231 14.0769 12.615 14.5504 12.615 14.5504C15.0204 14.4733 15.9456 12.8766 15.9456 12.8766Z"/>
+</svg>
\ No newline at end of file
diff --git a/sites/fast-website/src/app/svg/icon-twitter.svg b/sites/fast-website/src/app/svg/icon-twitter.svg
new file mode 100644
index 00000000000..97dfbe78a27
--- /dev/null
+++ b/sites/fast-website/src/app/svg/icon-twitter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-twitter" width="16" height="17" viewBox="0 0 16 17">
+<path d="M14.3554 4.82757C14.3655 5.00256 14.3655 5.17759 14.3655 5.35259C14.3655 10.6901 11.066 16.8401 5.03555 16.8401C3.17767 16.8401 1.45179 16.1776 0 15.0276C0.26397 15.0651 0.517752 15.0776 0.791878 15.0776C2.32485 15.0776 3.73605 14.4401 4.86296 13.3526C3.42133 13.3151 2.2132 12.1526 1.79694 10.5526C2.00001 10.5901 2.20304 10.6151 2.41626 10.6151C2.71067 10.6151 3.00511 10.5651 3.2792 10.4776C1.77666 10.1026 0.649721 8.47758 0.649721 6.51508V6.4651C1.08625 6.7651 1.59391 6.9526 2.13195 6.97757C1.24869 6.25255 0.670034 5.01507 0.670034 3.61506C0.670034 2.86507 0.832441 2.17757 1.11672 1.57757C2.73095 4.02757 5.15736 5.62754 7.87816 5.80257C7.82741 5.50257 7.79694 5.1901 7.79694 4.87759C7.79694 2.65257 9.25888 0.840088 11.0761 0.840088C12.0203 0.840088 12.8731 1.32759 13.4721 2.11509C14.2132 1.9401 14.9238 1.60258 15.5533 1.14009C15.3096 2.07761 14.7919 2.86511 14.1117 3.36508C14.7716 3.27762 15.4112 3.05257 16 2.7401C15.5534 3.54007 14.995 4.25254 14.3554 4.82757Z"/>
+</svg>
\ No newline at end of file

From a6dc7c2afdc15919cad5655e8e116cd2ec88909e Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Tue, 19 May 2020 13:15:12 -0700
Subject: [PATCH 2/7] switch twitter and github icons so they are assigned
 correctly

---
 sites/fast-website/src/app/data/community.data.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/fast-website/src/app/data/community.data.ts b/sites/fast-website/src/app/data/community.data.ts
index abfa7b381dd..238d339bec3 100644
--- a/sites/fast-website/src/app/data/community.data.ts
+++ b/sites/fast-website/src/app/data/community.data.ts
@@ -25,7 +25,7 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Follow along as we share out the latest happenings on Twitter. You will find important updates, announcements, and sneak peeks.",
         header: "Twitter",
-        icon: GithubIcon,
+        icon: TwitterIcon,
     },
     {
         actionLink: "https://github.com/microsoft/fast-dna",
@@ -33,6 +33,6 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Explore the FAST repository on Github and try out our components, utilities, and tools. Or, mix-and-match with your own solutions.",
         header: "Github",
-        icon: TwitterIcon,
+        icon: GithubIcon,
     },
 ];

From 74e7b6b4f42a62e31dbddd5f5c07e84e0abca237 Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Tue, 19 May 2020 17:11:22 -0700
Subject: [PATCH 3/7] remove class's for framework content placement and use
 nth-of-type. update h3 style. update section container class naming function

---
 .../content-placement-container.styles.ts     | 80 +++++++++----------
 .../content-placement-container.template.ts   | 10 +--
 .../src/app/data/framework.data.ts            |  9 ---
 3 files changed, 41 insertions(+), 58 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index d64c146787e..14bde78ec48 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -18,30 +18,30 @@ export const ContentPlacementContainerStyles = css`
         padding: 0 calc(var(--design-unit) * 2px);
     }
 
-    .framework_ContentPlacement4,
-    .framework_ContentPlacement5,
-    .framework_ContentPlacement6 {
+    .framework_ContentPlacement:nth-of-type(4),
+    .framework_ContentPlacement:nth-of-type(5),
+    .framework_ContentPlacement:nth-of-type(6) {
         border-top: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
     }
 
-    .framework_ContentPlacement1,
-    .framework_ContentPlacement2,
-    .framework_ContentPlacement4,
-    .framework_ContentPlacement5 {
+    .framework_ContentPlacement:nth-of-type(1),
+    .framework_ContentPlacement:nth-of-type(2),
+    .framework_ContentPlacement:nth-of-type(4),
+    .framework_ContentPlacement:nth-of-type(5) {
         border-right: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
     }
 
-    .framework_ContentPlacement1,
-    .framework_ContentPlacement2,
-    .framework_ContentPlacement3 {
+    .framework_ContentPlacement:nth-of-type(1),
+    .framework_ContentPlacement:nth-of-type(2),
+    .framework_ContentPlacement:nth-of-type(3) {
         border-bottom: calc(var(--outline-width) * 0.5px) solid
             var(--neutral-outline-rest);
     }
 
-    .framework_ContentPlacement2,
-    .framework_ContentPlacement3,
-    .framework_ContentPlacement5,
-    .framework_ContentPlacement6 {
+    .framework_ContentPlacement:nth-of-type(2),
+    .framework_ContentPlacement:nth-of-type(3),
+    .framework_ContentPlacement:nth-of-type(5),
+    .framework_ContentPlacement:nth-of-type(6) {
         border-left: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
     }
 
@@ -50,36 +50,34 @@ export const ContentPlacementContainerStyles = css`
             grid-template-columns: repeat(2, 1fr);
         }
 
-        .framework_ContentPlacement {
+        .framework_ContentPlacement:nth-of-type(2),
+        .framework_ContentPlacement:nth-of-type(4),
+        .framework_ContentPlacement:nth-of-type(6) {
             border: none;
-        }
-
-        .framework_ContentPlacement2,
-        .framework_ContentPlacement4,
-        .framework_ContentPlacement6 {
             border-left: calc(var(--outline-width) * 0.5px) solid
                 var(--neutral-outline-rest);
         }
 
-        .framework_ContentPlacement1,
-        .framework_ContentPlacement3,
-        .framework_ContentPlacement5 {
+        .framework_ContentPlacement:nth-of-type(1),
+        .framework_ContentPlacement:nth-of-type(3),
+        .framework_ContentPlacement:nth-of-type(5) {
+            border: none;
             border-right: calc(var(--outline-width) * 0.5px) solid
                 var(--neutral-outline-rest);
         }
 
-        .framework_ContentPlacement1,
-        .framework_ContentPlacement2,
-        .framework_ContentPlacement3,
-        .framework_ContentPlacement4 {
+        .framework_ContentPlacement:nth-of-type(1),
+        .framework_ContentPlacement:nth-of-type(2),
+        .framework_ContentPlacement:nth-of-type(3),
+        .framework_ContentPlacement:nth-of-type(4) {
             border-bottom: calc(var(--outline-width) * 0.5px) solid
                 var(--neutral-outline-rest);
         }
 
-        .framework_ContentPlacement3,
-        .framework_ContentPlacement4,
-        .framework_ContentPlacement5,
-        .framework_ContentPlacement6 {
+        .framework_ContentPlacement:nth-of-type(3),
+        .framework_ContentPlacement:nth-of-type(4),
+        .framework_ContentPlacement:nth-of-type(5),
+        .framework_ContentPlacement:nth-of-type(6) {
             border-top: calc(var(--outline-width) * 0.5px) solid
                 var(--neutral-outline-rest);
         }
@@ -91,18 +89,19 @@ export const ContentPlacementContainerStyles = css`
             grid-template-columns: 1fr;
         }
 
-        .framework_ContentPlacement {
+        .framework_ContentPlacement:nth-of-type(1),
+        .framework_ContentPlacement:nth-of-type(2),
+        .framework_ContentPlacement:nth-of-type(3),
+        .framework_ContentPlacement:nth-of-type(4),
+        .framework_ContentPlacement:nth-of-type(5) {
             border: none;
-        }
-
-        .framework_ContentPlacement1,
-        .framework_ContentPlacement2,
-        .framework_ContentPlacement3,
-        .framework_ContentPlacement4,
-        .framework_ContentPlacement5 {
             border-bottom: calc(var(--outline-width) * 1px) solid
                 var(--neutral-outline-rest);
         }
+
+        .framework_ContentPlacement:nth-of-type(6) {
+            border: none;
+        }
     }
 
     /* This creates the blur and background color changes on hover */
@@ -123,8 +122,7 @@ export const ContentPlacementContainerStyles = css`
     }
 
     h3 {
-        margin-top: 0;
-        margin-bottom: calc(var(--design-unit) * 5px);
+        margin-top: 0 0 calc(var(--design-unit) * 5px) 0;
         font-size: var(--type-ramp-plus-2-font-size);
     }
 `;
diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
index eb1afb06769..5deefc7df49 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
@@ -3,19 +3,13 @@ import { ContentPlacementContainer } from "./content-placement-container";
 import { CommunityContentPlacementData } from "../../data/community.data";
 
 export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
-    <div
-        class="container ${x =>
-            x.section === "framework" ? "framework_container" : ""} ${x =>
-            x.section === "community" ? "community_container" : ""}"
-    >
+    <div class="container ${x => x.section}_container">
         ${when(
             x => x.section === "framework",
             html<ContentPlacementContainer>`
                 ${repeat(
                     x => x.frameworkContentPlacementData,
-                    html`<site-content-placement
-                        class="framework_ContentPlacement ${x => x.name}"
-                    >
+                    html`<site-content-placement class="framework_ContentPlacement">
                         <h3>${x => x.header}</h3>
                         <p slot="body">${x => x.body}</p>
                     </site-content-placement>`
diff --git a/sites/fast-website/src/app/data/framework.data.ts b/sites/fast-website/src/app/data/framework.data.ts
index 2e007e94ac1..037c34882c9 100644
--- a/sites/fast-website/src/app/data/framework.data.ts
+++ b/sites/fast-website/src/app/data/framework.data.ts
@@ -1,46 +1,37 @@
 export interface FrameworkContentPlacementData {
     body?: string;
     header?: string;
-    name?: string;
 }
 
-const prefix: string = "framework_ContentPlacement";
-
 export const frameworkContentPlacementData: FrameworkContentPlacementData[] = [
     {
         body:
             "Angular's default binding syntax will always set properties on an element. This works well for rich data, like objects and arrays, and also works well for primitive values so long as the Custom Element author has mapped any exposed attributes to corresponding properties.",
         header: "Angular 8.2.14",
-        name: `${prefix}1`,
     },
     {
         body:
             "DIO uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, DIO will use properties, otherwise it will fallback to attributes.",
         header: "DIO",
-        name: `${prefix}2`,
     },
     {
         body:
             "hyperHTML will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hyperHTML 2.32.2",
-        name: `${prefix}3`,
     },
     {
         body:
             "Dojo will pass data as attributes only when the data is a type of string, otherwise it is set as a property.",
         header: "Dojo 6.0.4",
-        name: `${prefix}4`,
     },
     {
         body:
             "Hybrids will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hybrids 4.1.7",
-        name: `${prefix}5`,
     },
     {
         body:
             "AngularJS can declaratively pass data to attributes using ng-attr, or to properties using ng-prop.",
         header: "AngularJS (1.x) 1.7.9",
-        name: `${prefix}6`,
     },
 ];

From d9f92a88e06bb3f33061be50497bab8f0cd86e7d Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Tue, 19 May 2020 17:20:53 -0700
Subject: [PATCH 4/7] update container naming function

---
 .../content-placement-container.template.ts                | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
index 5deefc7df49..1c9c2828c04 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
@@ -3,7 +3,12 @@ import { ContentPlacementContainer } from "./content-placement-container";
 import { CommunityContentPlacementData } from "../../data/community.data";
 
 export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
-    <div class="container ${x => x.section}_container">
+    <div
+        class="container ${x =>
+            ["framework", "community"].includes(x.section)
+                ? `${x.section}_container`
+                : ""}"
+    >
         ${when(
             x => x.section === "framework",
             html<ContentPlacementContainer>`

From be65304f05e5b9278ef00385645d7b8002c80bcf Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Wed, 20 May 2020 09:55:23 -0700
Subject: [PATCH 5/7] add border variable

---
 .../content-placement-container.styles.ts     | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index 14bde78ec48..d5e6f82de61 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -3,6 +3,7 @@ import { display } from "@microsoft/fast-foundation";
 
 export const ContentPlacementContainerStyles = css`
     ${display("block")}:host {
+        --border: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
         contain: none;
         font-family: var(--body-font);
     }
@@ -21,28 +22,27 @@ export const ContentPlacementContainerStyles = css`
     .framework_ContentPlacement:nth-of-type(4),
     .framework_ContentPlacement:nth-of-type(5),
     .framework_ContentPlacement:nth-of-type(6) {
-        border-top: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+        border-top: var(--border);
     }
 
     .framework_ContentPlacement:nth-of-type(1),
     .framework_ContentPlacement:nth-of-type(2),
     .framework_ContentPlacement:nth-of-type(4),
     .framework_ContentPlacement:nth-of-type(5) {
-        border-right: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+        border-right: var(--border);
     }
 
     .framework_ContentPlacement:nth-of-type(1),
     .framework_ContentPlacement:nth-of-type(2),
     .framework_ContentPlacement:nth-of-type(3) {
-        border-bottom: calc(var(--outline-width) * 0.5px) solid
-            var(--neutral-outline-rest);
+        border-bottom: var(--border);
     }
 
     .framework_ContentPlacement:nth-of-type(2),
     .framework_ContentPlacement:nth-of-type(3),
     .framework_ContentPlacement:nth-of-type(5),
     .framework_ContentPlacement:nth-of-type(6) {
-        border-left: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+        border-left: var(--border);
     }
 
     @media screen and (max-width: 1000px) {
@@ -54,32 +54,28 @@ export const ContentPlacementContainerStyles = css`
         .framework_ContentPlacement:nth-of-type(4),
         .framework_ContentPlacement:nth-of-type(6) {
             border: none;
-            border-left: calc(var(--outline-width) * 0.5px) solid
-                var(--neutral-outline-rest);
+            border-left: var(--border);
         }
 
         .framework_ContentPlacement:nth-of-type(1),
         .framework_ContentPlacement:nth-of-type(3),
         .framework_ContentPlacement:nth-of-type(5) {
             border: none;
-            border-right: calc(var(--outline-width) * 0.5px) solid
-                var(--neutral-outline-rest);
+            border-right: var(--border);
         }
 
         .framework_ContentPlacement:nth-of-type(1),
         .framework_ContentPlacement:nth-of-type(2),
         .framework_ContentPlacement:nth-of-type(3),
         .framework_ContentPlacement:nth-of-type(4) {
-            border-bottom: calc(var(--outline-width) * 0.5px) solid
-                var(--neutral-outline-rest);
+            border-bottom: var(--border);
         }
 
         .framework_ContentPlacement:nth-of-type(3),
         .framework_ContentPlacement:nth-of-type(4),
         .framework_ContentPlacement:nth-of-type(5),
         .framework_ContentPlacement:nth-of-type(6) {
-            border-top: calc(var(--outline-width) * 0.5px) solid
-                var(--neutral-outline-rest);
+            border-top: var(--border);
         }
     }
 

From d55c7bd020673be0d97fa1767ff0e8dbf064f093 Mon Sep 17 00:00:00 2001
From: SamanthaAO <samanthaaorcutt@gmail.com>
Date: Thu, 21 May 2020 09:32:43 -0700
Subject: [PATCH 6/7] update borders to be more reusable

---
 .../content-placement-container.styles.ts     | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index d5e6f82de61..d293af248d9 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -19,30 +19,28 @@ export const ContentPlacementContainerStyles = css`
         padding: 0 calc(var(--design-unit) * 2px);
     }
 
-    .framework_ContentPlacement:nth-of-type(4),
-    .framework_ContentPlacement:nth-of-type(5),
-    .framework_ContentPlacement:nth-of-type(6) {
-        border-top: var(--border);
+    .framework_ContentPlacement:nth-of-type(n) {
+        border: var(--border);
     }
 
-    .framework_ContentPlacement:nth-of-type(1),
-    .framework_ContentPlacement:nth-of-type(2),
-    .framework_ContentPlacement:nth-of-type(4),
-    .framework_ContentPlacement:nth-of-type(5) {
-        border-right: var(--border);
+    .framework_ContentPlacement:nth-last-of-type(1),
+    .framework_ContentPlacement:nth-last-of-type(2),
+    .framework_ContentPlacement:nth-last-of-type(3) {
+        border-bottom: none;
     }
 
     .framework_ContentPlacement:nth-of-type(1),
     .framework_ContentPlacement:nth-of-type(2),
     .framework_ContentPlacement:nth-of-type(3) {
-        border-bottom: var(--border);
+        border-top: none;
     }
 
-    .framework_ContentPlacement:nth-of-type(2),
-    .framework_ContentPlacement:nth-of-type(3),
-    .framework_ContentPlacement:nth-of-type(5),
-    .framework_ContentPlacement:nth-of-type(6) {
-        border-left: var(--border);
+    .framework_ContentPlacement:nth-of-type(3n) {
+        border-right: none;
+    }
+
+    .framework_ContentPlacement:nth-of-type(3n + 1) {
+        border-left: none;
     }
 
     @media screen and (max-width: 1000px) {
@@ -50,31 +48,27 @@ export const ContentPlacementContainerStyles = css`
             grid-template-columns: repeat(2, 1fr);
         }
 
-        .framework_ContentPlacement:nth-of-type(2),
-        .framework_ContentPlacement:nth-of-type(4),
-        .framework_ContentPlacement:nth-of-type(6) {
+        .framework_ContentPlacement:nth-of-type(2n) {
             border: none;
             border-left: var(--border);
         }
 
-        .framework_ContentPlacement:nth-of-type(1),
-        .framework_ContentPlacement:nth-of-type(3),
-        .framework_ContentPlacement:nth-of-type(5) {
+        .framework_ContentPlacement:first-of-type,
+        .framework_ContentPlacement:nth-of-type(2n + 1) {
             border: none;
             border-right: var(--border);
         }
 
-        .framework_ContentPlacement:nth-of-type(1),
-        .framework_ContentPlacement:nth-of-type(2),
-        .framework_ContentPlacement:nth-of-type(3),
-        .framework_ContentPlacement:nth-of-type(4) {
+        .framework_ContentPlacement:nth-of-type(n) {
             border-bottom: var(--border);
         }
 
-        .framework_ContentPlacement:nth-of-type(3),
-        .framework_ContentPlacement:nth-of-type(4),
-        .framework_ContentPlacement:nth-of-type(5),
-        .framework_ContentPlacement:nth-of-type(6) {
+        .framework_ContentPlacement:nth-last-of-type(1),
+        .framework_ContentPlacement:nth-last-of-type(2) {
+            border-bottom: none;
+        }
+
+        .framework_ContentPlacement:nth-of-type(n + 3) {
             border-top: var(--border);
         }
     }
@@ -85,17 +79,13 @@ export const ContentPlacementContainerStyles = css`
             grid-template-columns: 1fr;
         }
 
-        .framework_ContentPlacement:nth-of-type(1),
-        .framework_ContentPlacement:nth-of-type(2),
-        .framework_ContentPlacement:nth-of-type(3),
-        .framework_ContentPlacement:nth-of-type(4),
-        .framework_ContentPlacement:nth-of-type(5) {
+        .framework_ContentPlacement:nth-of-type(n) {
             border: none;
             border-bottom: calc(var(--outline-width) * 1px) solid
                 var(--neutral-outline-rest);
         }
 
-        .framework_ContentPlacement:nth-of-type(6) {
+        .framework_ContentPlacement:last-of-type {
             border: none;
         }
     }

From 9759ce75f29d73471c11e5248a4f51662bcb7b83 Mon Sep 17 00:00:00 2001
From: John Kreitlow <john.kreitlow@microsoft.com>
Date: Thu, 21 May 2020 13:03:04 -0700
Subject: [PATCH 7/7] Change grid borders to be mobile-first

---
 .../content-placement-container.styles.ts     | 91 ++++++-------------
 sites/fast-website/src/app/css/style.css      |  6 ++
 2 files changed, 35 insertions(+), 62 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index d293af248d9..fa74fac1dd3 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -3,7 +3,8 @@ import { display } from "@microsoft/fast-foundation";
 
 export const ContentPlacementContainerStyles = css`
     ${display("block")}:host {
-        --border: calc(var(--outline-width) * 0.5px) solid var(--neutral-outline-rest);
+        --border-width: calc(var(--outline-width) * 1px);
+        --border: var(--border-width) solid var(--neutral-outline-rest);
         contain: none;
         font-family: var(--body-font);
     }
@@ -11,98 +12,64 @@ export const ContentPlacementContainerStyles = css`
     .framework_container,
     .community_container {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr;
         justify-content: center;
     }
 
     .framework_ContentPlacement {
-        padding: 0 calc(var(--design-unit) * 2px);
-    }
-
-    .framework_ContentPlacement:nth-of-type(n) {
         border: var(--border);
+        border-width: 0 0 var(--border-width);
+        padding: 0 calc(var(--design-unit) * 2px);
     }
 
-    .framework_ContentPlacement:nth-last-of-type(1),
-    .framework_ContentPlacement:nth-last-of-type(2),
-    .framework_ContentPlacement:nth-last-of-type(3) {
+    .framework_ContentPlacement:last-of-type {
         border-bottom: none;
     }
 
-    .framework_ContentPlacement:nth-of-type(1),
-    .framework_ContentPlacement:nth-of-type(2),
-    .framework_ContentPlacement:nth-of-type(3) {
-        border-top: none;
-    }
-
-    .framework_ContentPlacement:nth-of-type(3n) {
-        border-right: none;
-    }
-
-    .framework_ContentPlacement:nth-of-type(3n + 1) {
-        border-left: none;
+    @media screen and (min-width: 700px) {
+        .framework_ContentPlacement {
+            border-width: 0 var(--border-width) var(--border-width) 0;
+        }
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (min-width: 700px) and (max-width: 999px) {
         .framework_container {
             grid-template-columns: repeat(2, 1fr);
         }
 
-        .framework_ContentPlacement:nth-of-type(2n) {
-            border: none;
-            border-left: var(--border);
+        .framework_ContentPlacement:nth-of-type(even) {
+            border-right: none;
         }
 
-        .framework_ContentPlacement:first-of-type,
-        .framework_ContentPlacement:nth-of-type(2n + 1) {
-            border: none;
-            border-right: var(--border);
-        }
-
-        .framework_ContentPlacement:nth-of-type(n) {
-            border-bottom: var(--border);
-        }
-
-        .framework_ContentPlacement:nth-last-of-type(1),
-        .framework_ContentPlacement:nth-last-of-type(2) {
+        .framework_ContentPlacement:nth-last-of-type(-n + 2):nth-of-type(odd) {
+            /* The last two items on medium screens have no bottom border */
             border-bottom: none;
         }
-
-        .framework_ContentPlacement:nth-of-type(n + 3) {
-            border-top: var(--border);
-        }
     }
 
-    @media screen and (max-width: 700px) {
+    @media screen and (min-width: 1000px) {
         .framework_container,
         .community_container {
-            grid-template-columns: 1fr;
+            grid-template-columns: repeat(3, 1fr);
         }
 
-        .framework_ContentPlacement:nth-of-type(n) {
-            border: none;
-            border-bottom: calc(var(--outline-width) * 1px) solid
-                var(--neutral-outline-rest);
+        .framework_ContentPlacement:nth-of-type(3n),
+        .framework_ContentPlacement:first-of-type
+            + .framework_ContentPlacement:last-of-type,
+        .framework_ContentPlacement:only-of-type {
+            border-right: none;
         }
 
-        .framework_ContentPlacement:last-of-type {
-            border: none;
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n):nth-last-of-type(-n + 3), /* first item when only three items are present */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n) ~ .framework_ContentPlacement:nth-last-of-type(-n + 3), /* last three items when full row of three */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n - 1) ~ .framework_ContentPlacement:nth-last-of-type(-n + 2), /* more than one row, last row with only two items */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n - 2) ~ .framework_ContentPlacement:last-of-type, /* more than one row, last row with only one item */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(-n + 2) {
+            /* only two items on a row that should fit three */
+            border-bottom: none;
         }
     }
 
-    /* This creates the blur and background color changes on hover */
-    /* start */
-    .container:hover site-content-placement {
-        filter: blur(1px);
-    }
-    .container:hover site-content-placement:hover {
-        /* background: linear-gradient(349.8deg, rgba(143, 68, 95, 0.3) 20.91%, rgba(148, 81, 73, 0.3) 99.75%); */
-        box-shadow: 0px 10px 44px rgba(0, 0, 0, 0.1);
-        border-radius: var(--design-unit);
-        filter: blur(0);
-    }
-    /* end */
-
     .icon {
         fill: currentColor;
     }
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
index 37716a2c32e..4b2f3621828 100644
--- a/sites/fast-website/src/app/css/style.css
+++ b/sites/fast-website/src/app/css/style.css
@@ -3,6 +3,12 @@
   --background-color: #242424;
 }
 
+html,
+body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
 body {
   background-color: var(--background-color);
   color: var(--neutral-foreground-rest);