css

src/App/App.css

@@ -3930,6 +3930,7 @@ height: min-content !important;
 
 
 figure {
+  align-self: center;
   display: table;
   text-align: center;
   font-style: italic;
@@ -3944,4 +3945,16 @@ figcaption{
   caption-side: bottom;
   padding: 0.5em;
   background-color: var(--darkerbeige)
+}
+
+figure .row div{
+  padding-top: 20px;
+  display: grid; 
+ justify-content: center;
+}
+
+.figure-wrapper{
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
\ No newline at end of file

src/contents/description.tsx

@@ -74,15 +74,29 @@ export function Description() {
                 </Subesction>
                 <Subesction title="The CFTR Protein" id="Cystic Fibrosis2">
                     <div className="row align-items-center">
-                        <div className="full-small col-2"> 
-                            <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> 
+                    <figure>
+                        <div className="row">
+                        <div className="col">
+                            <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+                        </div> 
+                        <div className="col">
                             <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
                         </div>
+                        </div>
+                        <figcaption><b>Figure x.</b> </figcaption>
+                    </figure>
+                        
                         <div className="col">
                         <p>Text about CFTR <LoremMedium/></p>
-                            <div className="col gif-wrapper">
-                                <img className="fanzor gif" src="https://static.igem.wiki/teams/5247/fanzor/cftr-wt.gif"></img>
-                            </div>
+                        <div className="figure-wrapper">
+                            <figure>
+                                <div className="col gif-wrapper">
+                                    <img className="fanzor gif" src="https://static.igem.wiki/teams/5247/fanzor/cftr-wt.gif"></img>
+                                </div>
+                                <figcaption> <b>Figure 3.</b>Phase contrast image of HEK293T at 20x magnification</figcaption>
+                            </figure>
+                        </div>
+                            
                         </div>
                     </div>
                 </Subesction>