feat: changed the styling of the officer's page

Author: jbriones1

src/app/pages/officers/officers.component.html

@@ -22,10 +22,10 @@ <h2>Our Executives</h2>
             <img class="card__img" [src]="exec.photoName" [alt]="exec.photoName" />
             <div class="card__info">
               <div class="card__name">
-                <strong>{{ exec.name }}</strong>
+                <strong class="card__text">{{ exec.name }}</strong>
               </div>
               <div class="card__position">
-                <strong>{{ exec.position }}</strong>
+                <strong class="card__text">{{ exec.position }}</strong>
               </div>
             </div>
           </div>

src/app/pages/officers/officers.component.scss

@@ -23,17 +23,16 @@
   }
 
   &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     width: 100%;
-    text-align: center;
     position: absolute;
-    bottom: 0;
+    bottom: 0.75rem;
   }
 
-  &__name {
-    background-color: black;
-  }
-
-  &__position {
-    background-color: black;
+  &__text {
+    padding: 0.5rem;
+    background-color: g.$accent2;
   }
 }

src/app/pages/officers/officers.data.ts

@@ -209,12 +209,12 @@ export const executives: ExecutiveAdministration[] = [
       {
         name: 'Laurenzo Maddatu',
         position: 'First-Year Representative',
-        photoName: 'fyr-2.png'
+        photoName: 'fyr-1.png'
       },
       {
         name: 'Mengna Ma',
         position: 'First-Year Representative',
-        photoName: 'fyr-1.png'
+        photoName: 'fyr-2.png'
       },
       {
         name: 'Arielle Felicia',