Registration page updates (#1390)

Co-authored-by: Hinton <oscar@oscarhinton.com>

src/app/accounts/register.component.html

@@ -1,44 +1,100 @@
 <div class="layout" [ngClass]="['layout', layout]">
-  <header class="header" *ngIf="layout === 'enterprise2'">
+  <!-- TEAMS 1 Header -->
+  <header
+    class="header"
+    *ngIf="
+      layout === 'default' ||
+      layout === 'teams' ||
+      layout === 'teams1' ||
+      layout === 'teams2' ||
+      layout === 'enterprise' ||
+      layout === 'enterprise1' ||
+      layout === 'enterprise2' ||
+      layout === 'cnetcmpgnent' ||
+      layout === 'cnetcmpgnteams' ||
+      layout === 'cnetcmpgnind'
+    "
+  >
     <div class="container">
       <div class="row">
         <div class="col-7">
           <img
             alt="Bitwarden"
             class="logo mb-2"
-            src="../../images/register-layout/logo-horizontal-white.png"
+            src="../../images/register-layout/logo-horizontal-white.svg"
           />
         </div>
       </div>
     </div>
   </header>
+
   <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
     <div class="row">
       <div class="col-7" *ngIf="layout">
         <div class="mt-5">
-          <div *ngIf="layout === 'enterprise2'">
+          <!-- Default Body -->
-            <h2>Companies globally trust Bitwarden for password management.</h2>
+          <div
-            <p>Start your 7-day free trial!</p>
+            *ngIf="
-            <p class="highlight">Quickly deploy your <b>organization</b></p>
+              layout === 'teams' ||
-            <p>Use Bitwarden across all platforms</p>
+              layout === 'enterprise' ||
+              layout === 'enterprise1' ||
+              layout === 'default'
+            "
+          >
+            <h1>The Bitwarden Password Manager</h1>
+            <h2>
+              Trusted by millions of individuals, teams, and organizations worldwide for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
             <p>Collaborate and share securely</p>
-            <figure>
+            <p>Access anywhere on any device</p>
-              <figcaption>
+            <p>Create your account to get started</p>
-                <cite>
-                  <img src="../../images/register-layout/wired-logo.png" alt="Wired" />
-                </cite>
-              </figcaption>
-              <blockquote>
-                "Bitwarden has become a popular choice among open-source software advocates. After
-                using it for a few months, I can see why." - February 2020
-              </blockquote>
-            </figure>
           </div>
-          <div *ngIf="layout === 'enterprise3'">
+
-            <p>Enterprise 3 layout</p>
+          <!-- Teams & Enterprise Body -->
+          <div *ngIf="layout === 'teams1' || layout === 'teams2' || layout === 'enterprise2'">
+            <h1>
+              Start Your <span *ngIf="layout === 'teams1' || layout === 'teams1'">Teams<br /></span
+              ><span *ngIf="layout === 'enterprise2'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
           </div>
-          <div *ngIf="layout === 'enterprise4'">
+
-            <p>Enterprise 4 layout</p>
+          <!-- CNET Campaign Teams & Enterprise Body -->
+          <div *ngIf="layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnent'">
+            <h1>
+              Start Your <span *ngIf="layout === 'cnetcmpgnteams'">Teams<br /></span
+              ><span *ngIf="layout === 'cnetcmpgnent'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+
+          <!-- CNET Campaign Premium Body -->
+          <div *ngIf="layout === 'cnetcmpgnind'">
+            <h1>Start Your Premium Account Now</h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
+            <p>Secure your account with advanced two-step login</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
           </div>
         </div>
       </div>
@@ -212,5 +268,88 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="col-7 d-flex align-items-center">
+        <div
+          *ngIf="
+            layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/cnet-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="cnet logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              "No more excuses; start using Bitwarden today. The identity you save could be your
+              own. The money definitely will be."
+            </blockquote>
+          </figure>
+        </div>
+
+        <div
+          *ngIf="
+            layout === 'teams' ||
+            layout === 'teams1' ||
+            layout === 'teams2' ||
+            layout === 'enterprise' ||
+            layout === 'enterprise1' ||
+            layout === 'enterprise2' ||
+            layout === 'default'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/forbes-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="Forbes Logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              “Bitwarden boasts the backing of some of the world's best security experts and an
+              attractive, easy-to-use interface”
+            </blockquote>
+          </figure>
+        </div>
+      </div>
+      <div
+        *ngIf="
+          layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+      <div
+        *ngIf="
+          layout === 'teams' ||
+          layout === 'teams1' ||
+          layout === 'teams2' ||
+          layout === 'enterprise' ||
+          layout === 'enterprise1' ||
+          layout === 'enterprise2' ||
+          layout === 'default'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+    </div>
   </form>
 </div>

src/images/register-layout/cnet-logo.svg

@@ -0,0 +1,3 @@
+<svg width="1236" height="906" viewBox="0 0 1236 906" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1188.71 632.229C1204.72 632.229 1236 632.229 1236 632.229V689.173C1236 689.173 1174.89 689.173 1162.52 689.173C1138.52 689.173 1115.24 677.492 1121.79 680.413C1087.59 665.081 1074.5 627.849 1071.59 586.235V109.508H1148.7V228.508V229.238H1222.18V284.722H1148.7V285.452V592.076C1150.16 622.738 1168.34 632.229 1188.71 632.229ZM757.319 588.425V327.065C755.137 179.594 1014.12 178.864 1009.75 330.716V456.285C1009.75 464.316 1003.21 470.156 995.932 470.156H834.432V592.076C835.159 649.75 934.096 649.02 934.096 592.076V533.671H1010.48V588.425C1014.12 739.547 755.137 735.897 757.319 588.425ZM932.641 412.482V327.065C932.641 270.121 834.432 270.121 832.977 327.065V412.482H932.641ZM608.186 319.765C608.186 266.471 517.979 267.931 516.524 321.955V689.173H405.219V632.229H440.866V286.182H398.672V229.968H506.339V271.581C506.339 271.581 519.433 251.869 553.625 232.888C597.274 208.796 640.195 232.888 633.648 229.968C667.839 245.299 680.934 282.532 683.844 324.145V632.959H732.585V689.173H608.913L608.186 319.765ZM303.372 0H358.661V906H303.372V0ZM0.0137167 588.425V327.065C-2.16872 179.594 256.814 178.864 252.449 330.716V375.979H176.791L176.064 327.065C176.064 270.851 78.5814 272.311 76.399 329.255V592.076C77.1265 649.75 176.064 649.02 176.064 592.076V533.671H252.449V588.425C256.814 739.547 -2.16872 735.897 0.0137167 588.425Z" fill="black"/>
+</svg>

src/images/register-layout/forbes-logo.svg

@@ -0,0 +1,4 @@
+<svg width="1955" height="490" viewBox="0 0 1955 490" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1190.36 139.23C1158.92 139.23 1134.23 145.974 1109.52 159.436C1109.52 87.5714 1109.52 22.4505 1111.78 0L961.288 26.9381V40.4136L977.007 42.6573C997.201 47.1449 1003.97 58.3636 1008.42 85.3276C1012.95 139.23 1010.68 426.703 1008.42 473.874C1048.85 482.862 1091.53 489.606 1134.21 489.606C1253.25 489.606 1325.11 415.484 1325.11 298.692C1325.11 206.62 1266.72 139.23 1190.36 139.23V139.23ZM1138.7 464.886C1129.71 464.886 1118.47 464.886 1111.75 462.655C1109.49 431.217 1107.26 298.692 1109.49 181.913C1122.97 177.412 1131.94 175.169 1143.19 175.169C1192.63 175.169 1219.58 233.558 1219.58 305.41C1219.57 395.277 1185.87 464.886 1138.7 464.886V464.886ZM395.29 8.97504H0V29.1818L22.4635 31.4256C51.6453 35.9131 62.8901 53.8761 67.3646 96.5464C74.1218 177.4 71.8651 323.399 67.3646 392.995C62.8771 435.678 51.6583 455.898 22.4635 458.116L0 462.629V480.592H253.791V462.629L226.84 458.116C197.645 455.885 186.413 435.678 181.926 392.995C179.669 363.787 177.425 316.616 177.425 258.24L231.328 260.483C265.023 260.483 280.729 287.434 287.473 325.604H307.693V166.194H287.473C280.716 204.377 265.023 231.315 231.328 231.315L177.438 233.571C177.438 157.206 179.682 85.3406 181.939 42.6703H260.535C321.195 42.6703 352.633 80.8401 375.084 148.231L397.547 141.486L395.29 8.97504V8.97504Z" fill="black"/>
+<path d="M523.315 134.742C635.619 134.742 691.765 211.108 691.765 312.168C691.765 408.74 628.875 489.619 516.57 489.619C404.279 489.619 348.133 413.241 348.133 312.168C348.133 215.596 411.01 134.742 523.315 134.742V134.742ZM516.57 157.206C467.156 157.206 453.68 224.584 453.68 312.168C453.68 397.508 476.144 467.13 521.071 467.13C572.69 467.13 586.192 399.752 586.192 312.168C586.192 226.827 563.754 157.206 516.57 157.206ZM1354.3 314.425C1354.3 222.34 1412.69 134.742 1527.23 134.742C1621.54 134.742 1666.48 204.377 1666.48 296.449H1457.6C1455.34 379.545 1495.77 440.192 1576.64 440.192C1612.57 440.192 1630.54 431.23 1653.01 415.497L1661.98 426.716C1639.51 458.155 1590.11 489.619 1527.23 489.619C1426.16 489.606 1354.3 417.741 1354.3 314.425V314.425ZM1457.6 271.754L1563.16 269.498C1563.16 224.584 1556.42 157.206 1518.25 157.206C1480.08 157.206 1459.83 220.083 1457.6 271.754V271.754ZM1933.78 152.718C1906.83 141.474 1870.91 134.742 1830.48 134.742C1747.39 134.742 1695.71 184.144 1695.71 242.547C1695.71 300.949 1733.85 325.643 1787.82 343.619C1843.95 363.813 1859.69 379.545 1859.69 406.496C1859.69 433.448 1839.47 458.142 1803.53 458.142C1760.87 458.142 1729.41 433.448 1704.71 366.057L1688.98 370.57L1691.24 469.387C1718.19 480.605 1767.59 489.606 1810.27 489.606C1897.87 489.606 1954.03 444.666 1954.03 375.058C1954.03 327.887 1929.31 300.949 1870.92 278.473C1808.01 253.778 1785.58 238.059 1785.58 208.851C1785.58 179.656 1805.82 159.437 1832.77 159.437C1873.17 159.437 1900.13 184.144 1920.37 244.79L1936.08 240.303L1933.78 152.718V152.718ZM983.726 143.73C945.556 121.293 878.166 132.499 842.239 213.365L844.47 134.755L694.009 163.95V177.426L709.728 179.669C729.961 181.926 738.923 193.145 741.18 222.353C745.667 276.255 743.423 370.596 741.18 417.754C738.923 444.679 729.961 458.155 709.728 460.412L694.009 462.668V480.631H902.873V462.668L875.922 460.412C853.471 458.155 846.727 444.679 844.47 417.754C839.983 375.071 839.983 289.73 842.239 235.828C853.458 220.096 902.873 206.633 947.787 235.828L983.726 143.73V143.73Z" fill="black"/>
+</svg>

src/images/register-layout/logo-horizontal-white.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 547 83"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}</style></defs><path class="cls-1" d="M129,20.6c6.3,0,11.2,2.4,14.8,7.4s5.4,11.6,5.4,20.1c0,8.8-1.8,15.6-5.5,20.4s-8.7,7.2-15,7.2-11.1-2.2-14.7-6.8h-1l-1.9,4.7a1.85,1.85,0,0,1-1.7,1.1h-8a1.79,1.79,0,0,1-1.8-1.8V2.6A1.79,1.79,0,0,1,101.4.8h10.8A1.79,1.79,0,0,1,114,2.6V18q0,3.3-.6,10.5h.6C117.3,23.3,122.4,20.6,129,20.6Zm-4.6,11.7c-3.5,0-6.2,1.1-7.9,3.3S114,41.5,114,46.5v1.6c0,5.7.8,9.8,2.5,12.2s4.4,3.7,8.1,3.7a8.07,8.07,0,0,0,7.1-4.2c1.7-2.7,2.6-6.8,2.6-11.9s-.9-9.1-2.6-11.7A8.52,8.52,0,0,0,124.4,32.3ZM173,74.8H162.2a1.79,1.79,0,0,1-1.8-1.8V23.5a1.79,1.79,0,0,1,1.8-1.8H173a1.79,1.79,0,0,1,1.8,1.8V72.9A1.88,1.88,0,0,1,173,74.8Zm39.5-10.7a30.19,30.19,0,0,0,7.6-1.2,1.2,1.2,0,0,1,1.5,1.2v8.3a1.23,1.23,0,0,1-.7,1.1,33.36,33.36,0,0,1-12.5,2.1c-5.8,0-10-1.4-12.6-4.4s-4-7.3-4-13.1V32.6h-5.7a1.16,1.16,0,0,1-1.2-1.2V26.7c0-.1.1-.2.1-.3l7.9-4.7,3.9-10.4a1.17,1.17,0,0,1,1.1-.8h7.2a1.16,1.16,0,0,1,1.2,1.2V21.8h14.3a.65.65,0,0,1,.6.6v9a1.16,1.16,0,0,1-1.2,1.2H206.4V58a5.66,5.66,0,0,0,1.7,4.5A5.82,5.82,0,0,0,212.5,64.1Zm67.3,10.7a3.45,3.45,0,0,1-3.1-2.2L266.1,40.3c-.7-2.3-1.6-5.8-2.8-10.3H263l-1,3.6-2.1,6.8L249,72.7a3,3,0,0,1-3,2.1,3.09,3.09,0,0,1-3-2.3L229.7,26a2.33,2.33,0,0,1,2.3-2.9h.3a2.34,2.34,0,0,1,2.2,1.7l7.8,28.3c1.9,7.4,3.2,12.8,3.8,16.4h.3c1.8-7.4,3.2-12.3,4.1-14.8l10.1-29.6a3,3,0,0,1,2.9-2,2.91,2.91,0,0,1,2.8,2l9.4,29.4c2.3,7.5,3.7,12.3,4.2,14.8h.3c.3-2,1.5-7.6,3.8-16.6l7.5-27.9a2.34,2.34,0,0,1,2.2-1.7,2.28,2.28,0,0,1,2.2,2.9L283.3,72.5a3.12,3.12,0,0,1-3.1,2.3Zm59.4,0a1.83,1.83,0,0,1-1.8-1.6l-.9-6.6H336a24.69,24.69,0,0,1-8,7.1,21,21,0,0,1-9.7,2c-5.1,0-9-1.3-11.8-3.9a13,13,0,0,1-4.1-9.3,14.43,14.43,0,0,1,6-13.1c4.3-2.8,10.3-4.5,18.4-4.5l9.8-.3V41.2c0-5-1-8.6-3.1-11.1s-5.2-3.7-9.6-3.7a29.33,29.33,0,0,0-12.8,3.1,2.2,2.2,0,0,1-2.9-1.1,2.06,2.06,0,0,1,1.1-2.8,39.78,39.78,0,0,1,14.9-3.1c5.7,0,9.9,1.5,12.8,4.5s4.2,7.6,4.2,13.7V73.2A2.3,2.3,0,0,1,339.2,74.8Zm-20.7-3.4c5.6,0,9.9-1.6,13-4.7s4.8-7.6,4.8-13.1v-5l-9,.4c-7.3.3-12.4,1.5-15.6,3.4s-4.7,5-4.7,9a10.09,10.09,0,0,0,2.9,7.6A14.85,14.85,0,0,0,318.5,71.4Zm59.2-49.3a39.56,39.56,0,0,1,4.7.3,2.26,2.26,0,0,1,1.9,2.6,2.19,2.19,0,0,1-2.6,1.7,34.19,34.19,0,0,0-4.5-.4,13,13,0,0,0-10.8,5.6c-2.8,3.7-4.2,8.5-4.2,14.1V72.2a2.3,2.3,0,0,1-4.6,0v-47a2,2,0,0,1,2-2,1.92,1.92,0,0,1,2,1.9l.4,7.4h.3c2.1-3.8,4.4-6.5,6.8-8A14.77,14.77,0,0,1,377.7,22.1Zm35.2,0a22.38,22.38,0,0,1,9.7,2,18,18,0,0,1,7.3,7h.3c-.2-4.1-.3-7.9-.3-11.7V3.1a2.3,2.3,0,0,1,4.6,0V73a1.58,1.58,0,0,1-1.6,1.6,1.62,1.62,0,0,1-1.6-1.5l-1-6.5h-.4c-3.9,5.9-9.6,8.8-16.9,8.8s-12.5-2.2-16.4-6.7c-3.7-4.5-5.7-10.9-5.7-19.4,0-8.9,1.8-15.7,5.6-20.5C400.3,24.5,405.7,22.1,412.9,22.1Zm0,4.3c-5.7,0-9.9,2-12.8,6s-4.2,9.6-4.2,17.2q0,21.9,17.1,21.9c5.9,0,10.1-1.7,12.8-5.1s4.1-9,4.1-16.8v-.8c0-8-1.3-13.7-4.1-17.1C423.2,28.1,418.9,26.4,412.9,26.4Zm59.9,49.3c-7.5,0-13.3-2.3-17.6-7s-6.3-11.1-6.3-19.4,2-14.9,6.1-19.8,9.5-7.5,16.4-7.5c6,0,10.9,2.1,14.3,6.3,3.6,4.2,5.3,10,5.3,17.3v3.8H453.8c.1,7.1,1.7,12.5,5,16.3s7.9,5.5,14,5.5a45,45,0,0,0,7.8-.6,40.43,40.43,0,0,0,5.8-1.6,2,2,0,0,1,2.7,1.9,2.05,2.05,0,0,1-1.3,1.9,34.12,34.12,0,0,1-6.8,2A30.33,30.33,0,0,1,472.8,75.7Zm-1.4-49.4c-5,0-9,1.6-12,4.9s-4.7,8-5.3,14.1h32c0-5.9-1.3-10.7-3.9-14A13,13,0,0,0,471.4,26.3Zm72.4,48.5a2.26,2.26,0,0,1-2.3-2.3V41.2c0-5.2-1.1-9-3.2-11.3-2.3-2.3-5.6-3.6-10.2-3.6-6.2,0-10.7,1.5-13.5,4.7s-4.4,8.2-4.4,15.1V72.3a2.3,2.3,0,0,1-4.6,0V25.2a2.05,2.05,0,0,1,2.1-2.1,2.15,2.15,0,0,1,2.1,1.8l.6,5.2h.3c3.4-5.4,9.3-8.1,17.9-8.1,11.7,0,17.6,6.3,17.6,18.9V72.3A2.6,2.6,0,0,1,543.8,74.8ZM167.7,0a8.29,8.29,0,0,0-8.5,8.1v.8a8.51,8.51,0,0,0,17,0V8.2A8.37,8.37,0,0,0,167.7,0ZM67.4,1.8A3.25,3.25,0,0,0,65,.8H3.4A3.1,3.1,0,0,0,1,1.8,3.41,3.41,0,0,0,0,4.2v41a24.58,24.58,0,0,0,1.8,9.1,32.33,32.33,0,0,0,4.4,8,44.2,44.2,0,0,0,6.3,6.8,58.68,58.68,0,0,0,6.8,5.5c2,1.4,4.3,2.8,6.5,4.1s3.8,2.2,4.7,2.6,1.7.8,2.2,1.1a3.42,3.42,0,0,0,2.8,0,21.66,21.66,0,0,0,2.3-1.1c.9-.5,2.5-1.3,4.7-2.6S46.9,76,49,74.6a68.56,68.56,0,0,0,6.8-5.5,49.81,49.81,0,0,0,6.3-6.8,36,36,0,0,0,4.4-8,24.58,24.58,0,0,0,1.8-9.1V4.2A2.93,2.93,0,0,0,67.4,1.8ZM59.5,45.6c0,14.9-25.3,27.7-25.3,27.7V9.6H59.5Z"/></svg>

src/scss/pages.scss

@@ -173,18 +173,28 @@ app-sponsored-families {
 
 /* Register Layout Page */
 .layout {
-  &.enterprise2 {
+  &.default,
+  &.teams,
+  &.teams1,
+  &.teams2,
+  &.enterprise,
+  &.enterprise1,
+  &.enterprise2,
+  &.cnetcmpgnent,
+  &.cnetcmpgnteams,
+  &.cnetcmpgnind {
     header {
       background: #175ddc;
       color: #ced4da;
+      height: 70px;
 
       &:before {
         background: #175ddc;
         content: "";
-        height: 416px;
+        height: 520px;
         left: 0;
         position: absolute;
-        top: -76px;
+        top: -80px;
         transform: skewY(-3deg);
         width: 100%;
         z-index: -1;
@@ -197,15 +207,22 @@ app-sponsored-families {
       }
     }
 
+    h1 {
+      color: #ffffff;
+      font-size: 3.5rem;
+      margin: 50px 0 0;
+    }
+
     h2 {
       color: #ffffff;
-      font-size: 1.8rem;
+      font-size: 2rem;
-      margin: 100px 0 150px 0;
+      line-height: 1.5;
+      margin: 20px 0 140px;
     }
 
     p {
-      font-size: 1.4rem;
+      font-size: 2rem;
-      margin: 20px 0 40px 0;
+      margin: 10px 0 70px 0;
 
       &:before {
         content: "/";
@@ -226,10 +243,20 @@ app-sponsored-families {
       }
     }
 
+    figure {
+      margin: 0;
+    }
+
     blockquote {
       font-size: 1.4rem;
-      margin: 20px 0 0 0;
+      margin: 20px 0 0;
-      padding-right: 40px;
+    }
+  }
+
+  &.cnetcmpgnind {
+    p {
+      font-size: 1.5rem;
+      margin: 10px 0 50px 0;
     }
   }
 }