Apps grid

client/src/components/UI/Headlines/Headline/Headline.module.css

@@ -1,7 +1,10 @@
 .HeadlineTitle {
   color: var(--color-primary);
+  font-weight: 700;
 }
 
 .HeadlineSubtitle {
   color: var(--color-primary);
+  margin-bottom: 20px;
+  font-weight: 400;
 }

client/src/components/UI/Headlines/Headline/Headline.tsx

@@ -3,13 +3,13 @@ import classes from './Headline.module.css';
 
 interface ComponentProps {
   title: string;
-  subtitle?: string;
+  subtitle?: string | JSX.Element;
 }
 
 const Headline = (props: ComponentProps): JSX.Element => {
   return (
     <Fragment>
-      <h2 className={classes.HeadlineTitle}>{props.title}</h2>
+      <h1 className={classes.HeadlineTitle}>{props.title}</h1>
       {props.subtitle && <p className={classes.HeadlineSubtitle}>{props.subtitle}</p>}
     </Fragment>
   )

client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css

@@ -0,0 +1,7 @@
+.SectionHeadline {
+  text-transform: uppercase;
+  color: var(--color-primary);
+  font-weight: 900;
+  font-size: 20px;
+  margin-bottom: 16px;
+}

client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx

@@ -0,0 +1,13 @@
+import classes from './SectionHeadline.module.css';
+
+interface ComponentProps {
+  title: string;
+}
+
+const SectionHeadline = (props: ComponentProps): JSX.Element => {
+  return (
+    <h2 className={classes.SectionHeadline}>{props.title}</h2>
+  )
+}
+
+export default SectionHeadline;

client/src/components/UI/Layout/Layout.module.css

@@ -1,4 +1,22 @@
 .Container {
   width: 100%;
-  padding: var(--space-p-x);
+  padding: 20px;
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */
+
+@media (min-width: 769px) {
+  .Container {
+    padding: 25px 40px;
+  }
+}
+
+@media (min-width: 1201px) {
+  .Container {
+    padding: 50px 250px;
+  }
 }