Adjust background image(s) for Legacy Lab promo

Update CSS and HTML for the auth screens to adjust how the background is
displayed for the Legacy Lab promo. Change out the background image as
well. This background uses a slicing technique to extend the vertical
stripes of the image without repeating the legacy lab circle[1].

Also use classes to isolate legacy lab specific background changes from
the defaults we want to use for normal images. That way, we can just
remove the references to classes in HTML without having to revert the
CSS back.

[1]: https://en.wikipedia.org/wiki/9-slice_scaling

Co-authored-by: Han Pham <han@permanent.org>

Author: meisekimiu

src/app/auth/components/auth/auth.component.html

@@ -1,10 +1,11 @@
 <pr-announcement></pr-announcement>
-<div class="auth-root">
+<div class="auth-root legacy-lab">
   <div class="auth-container">
-    <div
-      class="image"
-      aria-description='Black and white photo of a child with a bicycle stopped in front of a black milk truck with a man standing by the door. The milk truck reads "Haadsma&#39;s Dairy." The photo appears to be from the 1950s.'
-    >
+    <div class="image legacy-lab">
+      <div
+        class="legacy-lab-center-slice"
+        aria-label="The Legacy Lab by Permanent"
+      ></div>
       <!-- <div class="testimony">
         <p class="text">
           At Permanent, we celebrate our members’ hard work through our Public

src/app/auth/components/auth/auth.component.scss

@@ -17,7 +17,9 @@
   flex-shrink: 1;
 
   @media screen {
-    padding: 20px 0px;
+    &:not(.legacy-lab) {
+      padding: 20px 0px;
+    }
   }
 }
 
@@ -56,9 +58,29 @@
 }
 
 .image {
+  &.legacy-lab {
+    background: url('../../../../assets/img/legacy_lab_sign_in_stripe.png');
+    background-size: contain;
+    background-position: center right 1.5rem;
+    background-repeat: repeat-y;
+  }
+
+  .legacy-lab-center-slice {
+    z-index: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url('../../../../assets/img/legacy_lab_sign_in_image.png');
+    background-size: contain;
+    background-position: center right 1.5rem;
+    background-repeat: no-repeat;
+  }
+
   position: relative;
   height: 100%;
-  background: url('../../../../assets/img/legacy_lab_sign_in_image.png');
+  background: url('../../../../assets/img/sign_in_image.png');
   background-size: cover;
   background-position: center center;
   flex-grow: 1;
@@ -160,7 +182,7 @@
 
   p {
     font-size: 1rem;
-    width: 60%;
+    width: 50%;
     font-family: 'UsualRegular', sans-serif;
   }