diff --git a/src/components/section-components/Header/style.header.scss b/src/components/section-components/Header/style.header.scss
index b7441c4..b460ca6 100644
--- a/src/components/section-components/Header/style.header.scss
+++ b/src/components/section-components/Header/style.header.scss
@@ -48,4 +48,8 @@ header.header {
   100% {
     color: #006eff;
   }
-}
\ No newline at end of file
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
\ No newline at end of file
diff --git a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css
index 608547c..8c37941 100644
--- a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css
+++ b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css
@@ -30,4 +30,43 @@ div.career-opening-card > p.career-role-description {
   margin-top: 0.6em;
   margin-bottom: 1.4em;
 }
+
+@media screen and (max-width: 1400px) {
+  div.career-opening-card {
+    width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 2.4em 1.2em;
+    background-color: #ffffff;
+    border-radius: 6px;
+    color: black;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    gap: 2em;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+  div.career-opening-card:hover {
+    cursor: pointer;
+    background-color: #fefefe;
+    -webkit-transform: translateY(-2px);
+            transform: translateY(-2px);
+  }
+  div.career-opening-card > p.career-role-description {
+    max-width: 40ch;
+    margin-top: 0.6em;
+    margin-bottom: 1.4em;
+  }
+}
 /*# sourceMappingURL=style.widgets.cards.career-opening-card.css.map */
\ No newline at end of file
diff --git a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map
index ba365ab..00a9e3d 100644
--- a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map
+++ b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,GAAG,AAAA,oBAAoB,CAAC;EACtB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,WAAW;EACpB,gBAAgB,EAAE,OAAO;EACzB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,gBAAgB;CAW7B;;AArBD,AAWE,GAXC,AAAA,oBAAoB,AAWpB,MAAM,CAAC;EACN,MAAM,EAAE,OAAO;EACf,gBAAgB,EAAE,OAAO;EACzB,SAAS,EAAE,gBAAgB;CAC5B;;AAfH,AAgBE,GAhBC,AAAA,oBAAoB,GAgBnB,CAAC,AAAA,wBAAwB,CAAC;EAC1B,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,KAAK;CACrB",
+    "mappings": "AAAA,AAAA,GAAG,AAAA,oBAAoB,CAAC;EACtB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,WAAW;EACpB,gBAAgB,EAAE,OAAO;EACzB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,gBAAgB;CAW7B;;AArBD,AAWE,GAXC,AAAA,oBAAoB,AAWpB,MAAM,CAAC;EACN,MAAM,EAAE,OAAO;EACf,gBAAgB,EAAE,OAAO;EACzB,SAAS,EAAE,gBAAgB;CAC5B;;AAfH,AAgBE,GAhBC,AAAA,oBAAoB,GAgBnB,CAAC,AAAA,wBAAwB,CAAC;EAC1B,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,KAAK;CACrB;;AAOH,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,MAAM;EAClC,AAAA,GAAG,AAAA,oBAAoB,CAAC;IACtB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,WAAW;IACpB,gBAAgB,EAAE,OAAO;IACzB,aAAa,EAAE,GAAG;IAClB,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,MAAM;IACtB,GAAG,EAAE,GAAG;IACR,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,aAAa;IAC9B,UAAU,EAAE,gBAAgB;GAW7B;EAxBD,AAcE,GAdC,AAAA,oBAAoB,AAcpB,MAAM,CAAC;IACN,MAAM,EAAE,OAAO;IACf,gBAAgB,EAAE,OAAO;IACzB,SAAS,EAAE,gBAAgB;GAC5B;EAlBH,AAmBE,GAnBC,AAAA,oBAAoB,GAmBnB,CAAC,AAAA,wBAAwB,CAAC;IAC1B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,KAAK;GACrB",
     "sources": [
         "style.widgets.cards.career-opening-card.scss"
     ],
diff --git a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss
index 8f7709b..6a02c59 100644
--- a/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss
+++ b/src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss
@@ -19,4 +19,36 @@ div.career-opening-card {
     margin-top: 0.6em;
     margin-bottom: 1.4em;
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.career-opening-card {
+    width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 2.4em 1.2em;
+    background-color: #ffffff;
+    border-radius: 6px;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    align-items: center;
+    justify-content: space-between;
+    transition: 0.2s ease-in-out;
+    &:hover {
+      cursor: pointer;
+      background-color: #fefefe;
+      transform: translateY(-2px);
+    }
+    > p.career-role-description {
+      max-width: 40ch;
+      margin-top: 0.6em;
+      margin-bottom: 1.4em;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css
index d1dbd47..a501de0 100644
--- a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css
+++ b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css
@@ -53,4 +53,65 @@ div.product-card > div.product-cta-button-wrapper > a.check-github-url {
   color: black;
   font-weight: 600;
 }
+
+@media screen and (max-width: 1400px) {
+  div.product-card {
+    width: 80%;
+    border-radius: 8px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 2.4em;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: auto;
+        grid-template-columns: auto;
+    text-align: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    color: black;
+    background-color: white;
+    border: 1.2px solid #f2f2f2;
+    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 135, 95, 0.25);
+            box-shadow: 0 8px 32px 0 rgba(31, 135, 95, 0.25);
+    cursor: pointer;
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+  div.product-card:hover {
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    -webkit-box-shadow: 0px 4px 12px 0 rgba(31, 135, 95, 0.5);
+            box-shadow: 0px 4px 12px 0 rgba(31, 135, 95, 0.5);
+  }
+  div.product-card > div.product-details-wrapper {
+    width: 80%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  div.product-card > div.product-details-wrapper > p.product-description {
+    max-width: 70ch;
+  }
+  div.product-card > div.product-cta-button-wrapper {
+    margin-top: 2em;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    gap: 36px;
+  }
+  div.product-card > div.product-cta-button-wrapper > a.check-github-url {
+    color: black;
+    font-weight: 600;
+  }
+}
 /*# sourceMappingURL=style.widgets.cards.product-card.css.map */
\ No newline at end of file
diff --git a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css.map b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css.map
index 879bfab..10178bf 100644
--- a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css.map
+++ b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,GAAG,AAAA,aAAa,CAAC;EACf,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,GAAG;EAClB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,SAAS;EAChC,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAC9B,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,KAAK;EACvB,MAAM,EAAE,mBAAmB;EAC3B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAwB;EACjD,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,gBAAgB;CAoB7B;;AAnCD,AAgBE,GAhBC,AAAA,aAAa,AAgBb,MAAM,CAAC;EACN,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAwB;CACpD;;AAnBH,AAoBE,GApBC,AAAA,aAAa,GAoBZ,GAAG,AAAA,wBAAwB,CAAC;EAC5B,KAAK,EAAE,GAAG;CAIX;;AAzBH,AAsBI,GAtBD,AAAA,aAAa,GAoBZ,GAAG,AAAA,wBAAwB,GAEzB,CAAC,AAAA,oBAAoB,CAAC;EACtB,SAAS,EAAE,IAAI;CAChB;;AAxBL,AA0BE,GA1BC,AAAA,aAAa,GA0BZ,GAAG,AAAA,2BAA2B,CAAC;EAC/B,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,IAAI;CAKV;;AAlCH,AA8BI,GA9BD,AAAA,aAAa,GA0BZ,GAAG,AAAA,2BAA2B,GAI5B,CAAC,AAAA,iBAAiB,CAAC;EACnB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,GAAG;CACjB",
+    "mappings": "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",
     "sources": [
         "style.widgets.cards.product-card.scss"
     ],
diff --git a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss
index ead4fbb..5fe511f 100644
--- a/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss
+++ b/src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss
@@ -33,4 +33,52 @@ div.product-card {
       font-weight: 600;
     }
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.product-card {
+    width: 80%;
+    border-radius: 8px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 2.4em;
+    display: grid;
+    grid-template-columns: auto;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    color: black;
+    background-color: white;
+    border: 1.2px solid #f2f2f2;
+    box-shadow: 0 8px 32px 0 rgba(31, 135, 95, 0.250);
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0px 4px 12px 0 rgba(31, 135, 95, 0.500);
+    }
+    > div.product-details-wrapper {
+      width: 80%;
+      margin-right: auto;
+      margin-left: auto;
+      > p.product-description {
+        max-width: 70ch;
+      }
+    }
+    > div.product-cta-button-wrapper {
+      margin-top: 2em;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 36px;
+      > a.check-github-url {
+        color: black;
+        font-weight: 600;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Careers/style.view-careers.css b/src/views/Careers/style.view-careers.css
index 5e73e1f..a27a35f 100644
--- a/src/views/Careers/style.view-careers.css
+++ b/src/views/Careers/style.view-careers.css
@@ -33,4 +33,44 @@ div.careers > div.volunteer-roles-section > div.volunteer-roles-wrapper {
   margin-left: auto;
   row-gap: 3em;
 }
+
+@media screen and (max-width: 1400px) {
+  div.careers {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 8em;
+    width: 90%;
+  }
+  div.careers > h1.careers-page-title {
+    font-size: 26px;
+  }
+  div.careers > p.careers-page-section-description {
+    text-align: center;
+    color: #f2f2f2;
+    width: 60ch;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 1em;
+    font-size: 14px;
+  }
+  div.careers > div.volunteer-roles-section {
+    width: 90%;
+    margin-top: 3em;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  div.careers > div.volunteer-roles-section > h3.volunteer-roles-title {
+    text-align: center;
+  }
+  div.careers > div.volunteer-roles-section > div.volunteer-roles-wrapper {
+    margin-top: 3em;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: auto;
+        grid-template-columns: auto;
+    margin-right: auto;
+    margin-left: auto;
+    row-gap: 3em;
+  }
+}
 /*# sourceMappingURL=style.view-careers.css.map */
\ No newline at end of file
diff --git a/src/views/Careers/style.view-careers.css.map b/src/views/Careers/style.view-careers.css.map
index cad35d6..e895d88 100644
--- a/src/views/Careers/style.view-careers.css.map
+++ b/src/views/Careers/style.view-careers.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,GAAG,AAAA,QAAQ,CAAC;EACV,UAAU,EAAE,GAAG;CA2BhB;;AA5BD,AAEE,GAFC,AAAA,QAAQ,GAEP,CAAC,AAAA,iCAAiC,CAAC;EACnC,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,IAAI;CAChB;;AAVH,AAWE,GAXC,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,CAAC;EAC5B,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CAYlB;;AA3BH,AAgBI,GAhBD,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,GAKzB,EAAE,AAAA,sBAAsB,CAAC;EACzB,UAAU,EAAE,MAAM;CACnB;;AAlBL,AAmBI,GAnBD,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,GAQzB,GAAG,AAAA,wBAAwB,CAAC;EAC5B,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,IAAI;EAC3B,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,GAAG;CACb",
+    "mappings": "AAAA,AAAA,GAAG,AAAA,QAAQ,CAAC;EACV,UAAU,EAAE,GAAG;CA2BhB;;AA5BD,AAEE,GAFC,AAAA,QAAQ,GAEP,CAAC,AAAA,iCAAiC,CAAC;EACnC,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,IAAI;CAChB;;AAVH,AAWE,GAXC,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,CAAC;EAC5B,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CAYlB;;AA3BH,AAgBI,GAhBD,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,GAKzB,EAAE,AAAA,sBAAsB,CAAC;EACzB,UAAU,EAAE,MAAM;CACnB;;AAlBL,AAmBI,GAnBD,AAAA,QAAQ,GAWP,GAAG,AAAA,wBAAwB,GAQzB,GAAG,AAAA,wBAAwB,CAAC;EAC5B,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,IAAI;EAC3B,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,GAAG;CACb;;AAQL,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,MAAM;EAClC,AAAA,GAAG,AAAA,QAAQ,CAAC;IACV,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,GAAG;GA8BX;EAlCD,AAKE,GALC,AAAA,QAAQ,GAKP,EAAE,AAAA,mBAAmB,CAAC;IACtB,SAAS,EAAE,IAAI;GAChB;EAPH,AAQE,GARC,AAAA,QAAQ,GAQP,CAAC,AAAA,iCAAiC,CAAC;IACnC,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,IAAI;GAChB;EAhBH,AAiBE,GAjBC,AAAA,QAAQ,GAiBP,GAAG,AAAA,wBAAwB,CAAC;IAC5B,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;GAYlB;EAjCH,AAsBI,GAtBD,AAAA,QAAQ,GAiBP,GAAG,AAAA,wBAAwB,GAKzB,EAAE,AAAA,sBAAsB,CAAC;IACzB,UAAU,EAAE,MAAM;GACnB;EAxBL,AAyBI,GAzBD,AAAA,QAAQ,GAiBP,GAAG,AAAA,wBAAwB,GAQzB,GAAG,AAAA,wBAAwB,CAAC;IAC5B,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,IAAI;IACb,qBAAqB,EAAE,IAAI;IAC3B,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,GAAG;GACb",
     "sources": [
         "style.view-careers.scss"
     ],
diff --git a/src/views/Careers/style.view-careers.scss b/src/views/Careers/style.view-careers.scss
index 2335ecb..cb786fc 100644
--- a/src/views/Careers/style.view-careers.scss
+++ b/src/views/Careers/style.view-careers.scss
@@ -26,4 +26,46 @@ div.careers {
       row-gap: 3em;
     }
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.careers {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 8em;
+    width: 90%;
+    > h1.careers-page-title {
+      font-size: 26px;
+    }
+    > p.careers-page-section-description {
+      text-align: center;
+      color: #f2f2f2;
+      width: 60ch;
+      margin-right: auto;
+      margin-left: auto;
+      margin-top: 1em;
+      font-size: 14px;
+    }
+    > div.volunteer-roles-section {
+      width: 90%;
+      margin-top: 3em;
+      margin-right: auto;
+      margin-left: auto;
+      > h3.volunteer-roles-title {
+        text-align: center;
+      }
+      > div.volunteer-roles-wrapper {
+        margin-top: 3em;
+        display: grid;
+        grid-template-columns: auto;
+        margin-right: auto;
+        margin-left: auto;
+        row-gap: 3em;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Products/style.view.products.css b/src/views/Products/style.view.products.css
index e3079dd..918438b 100644
--- a/src/views/Products/style.view.products.css
+++ b/src/views/Products/style.view.products.css
@@ -35,4 +35,51 @@ div.products > div.products-wrapper > h2.products-section-heading {
   text-align: center;
   margin-bottom: 2em;
 }
+
+@media screen and (max-width: 1400px) {
+  div.products {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 8em;
+    width: 90%;
+  }
+  div.products > h1.products-section-title {
+    font-size: 26px;
+  }
+  div.products > p.products-section-description {
+    text-align: center;
+    color: #f2f2f2;
+    width: 60ch;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 1em;
+    font-size: 14px;
+  }
+  div.products > div.gradient-text {
+    display: block;
+    margin: auto;
+    background-color: black;
+  }
+  div.products > div.cta-github-button-wrapper {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 2em;
+  }
+  div.products > div.products-wrapper {
+    margin-top: 1em;
+  }
+  div.products > div.products-wrapper > h2.products-section-heading {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 3em;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    text-align: center;
+    margin-bottom: 2em;
+  }
+}
 /*# sourceMappingURL=style.view.products.css.map */
\ No newline at end of file
diff --git a/src/views/Products/style.view.products.css.map b/src/views/Products/style.view.products.css.map
index abc7d59..925c5e0 100644
--- a/src/views/Products/style.view.products.css.map
+++ b/src/views/Products/style.view.products.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,GAAG,AAAA,SAAS,CAAC;EACX,UAAU,EAAE,GAAG;CA4BhB;;AA7BD,AAEE,GAFC,AAAA,SAAS,GAER,CAAC,AAAA,6BAA6B,CAAC;EAC/B,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,IAAI;CAChB;;AAVH,AAWE,GAXC,AAAA,SAAS,GAWR,GAAG,AAAA,0BAA0B,CAAC;EAC9B,KAAK,EAAE,WAAW;EAClB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;CAChB;;AAhBH,AAkBE,GAlBC,AAAA,SAAS,GAkBR,GAAG,AAAA,iBAAiB,CAAC;EACrB,UAAU,EAAE,GAAG;CAShB;;AA5BH,AAoBI,GApBD,AAAA,SAAS,GAkBR,GAAG,AAAA,iBAAiB,GAElB,EAAE,AAAA,yBAAyB,CAAC;EAC5B,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,WAAW;EAClB,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,GAAG;CACnB",
+    "mappings": "AAAA,AAAA,GAAG,AAAA,SAAS,CAAC;EACX,UAAU,EAAE,GAAG;CA4BhB;;AA7BD,AAEE,GAFC,AAAA,SAAS,GAER,CAAC,AAAA,6BAA6B,CAAC;EAC/B,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,IAAI;CAChB;;AAVH,AAWE,GAXC,AAAA,SAAS,GAWR,GAAG,AAAA,0BAA0B,CAAC;EAC9B,KAAK,EAAE,WAAW;EAClB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;CAChB;;AAhBH,AAkBE,GAlBC,AAAA,SAAS,GAkBR,GAAG,AAAA,iBAAiB,CAAC;EACrB,UAAU,EAAE,GAAG;CAShB;;AA5BH,AAoBI,GApBD,AAAA,SAAS,GAkBR,GAAG,AAAA,iBAAiB,GAElB,EAAE,AAAA,yBAAyB,CAAC;EAC5B,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,WAAW;EAClB,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,GAAG;CACnB;;AAQL,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,MAAM;EAClC,AAAA,GAAG,AAAA,SAAS,CAAC;IACX,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,GAAG;GAoCX;EAxCD,AAKE,GALC,AAAA,SAAS,GAKR,EAAE,AAAA,uBAAuB,CAAC;IAC1B,SAAS,EAAE,IAAI;GAChB;EAPH,AAQE,GARC,AAAA,SAAS,GAQR,CAAC,AAAA,6BAA6B,CAAC;IAC/B,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,IAAI;GAChB;EAhBH,AAiBE,GAjBC,AAAA,SAAS,GAiBR,GAAG,AAAA,cAAc,CAAC;IAClB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI;IACZ,gBAAgB,EAAE,KAAK;GACxB;EArBH,AAsBE,GAtBC,AAAA,SAAS,GAsBR,GAAG,AAAA,0BAA0B,CAAC;IAC9B,KAAK,EAAE,WAAW;IAClB,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;GAChB;EA3BH,AA6BE,GA7BC,AAAA,SAAS,GA6BR,GAAG,AAAA,iBAAiB,CAAC;IACrB,UAAU,EAAE,GAAG;GAShB;EAvCH,AA+BI,GA/BD,AAAA,SAAS,GA6BR,GAAG,AAAA,iBAAiB,GAElB,EAAE,AAAA,yBAAyB,CAAC;IAC5B,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,GAAG;GACnB",
     "sources": [
         "style.view.products.scss"
     ],
diff --git a/src/views/Products/style.view.products.scss b/src/views/Products/style.view.products.scss
index 53d6307..95130d9 100644
--- a/src/views/Products/style.view.products.scss
+++ b/src/views/Products/style.view.products.scss
@@ -27,4 +27,52 @@ div.products {
       margin-bottom: 2em;
     }
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.products {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 8em;
+    width: 90%;
+    > h1.products-section-title {
+      font-size: 26px;
+    }
+    > p.products-section-description {
+      text-align: center;
+      color: #f2f2f2;
+      width: 60ch;
+      margin-right: auto;
+      margin-left: auto;
+      margin-top: 1em;
+      font-size: 14px;
+    }
+    > div.gradient-text {
+      display: block;
+      margin: auto;
+      background-color: black;
+    }
+    > div.cta-github-button-wrapper {
+      width: fit-content;
+      margin-right: auto;
+      margin-left: auto;
+      margin-top: 2em;
+    }
+
+    > div.products-wrapper {
+      margin-top: 1em;
+      > h2.products-section-heading {
+        margin-right: auto;
+        margin-left: auto;
+        margin-top: 3em;
+        width: fit-content;
+        text-align: center;
+        margin-bottom: 2em;
+      }
+    }
+  }
 }
\ No newline at end of file