From 9f61a3edd33940d9a7a71ab45deef97d1f5a1dbd Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 21:37:46 +0000
Subject: [PATCH 01/12] feat(elig-start): recaptcha - first pass @ col-lg-6 for
 text and button

---
 .../templates/eligibility/start--senior.html     | 16 +++++++++-------
 .../eligibility/templates/eligibility/start.html |  4 ++--
 benefits/static/css/styles.css                   | 10 ----------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html
index d876ff2b0..316049297 100644
--- a/benefits/eligibility/templates/eligibility/start--senior.html
+++ b/benefits/eligibility/templates/eligibility/start--senior.html
@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,12 +16,14 @@ <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
-      {% translate "Get started with" as button_text %}
-      <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
-        {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
-      </a>
+  <div class="row">
+    <div class="d-flex justify-content-center">
+      <div class="col-12 col-lg-6">
+        {% translate "Get started with" as button_text %}
+        <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
+          {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
+        </a>
+      </div>
     </div>
   </div>
 {% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
index 7143705b4..7b3a2c6b1 100644
--- a/benefits/eligibility/templates/eligibility/start.html
+++ b/benefits/eligibility/templates/eligibility/start.html
@@ -11,8 +11,8 @@
 {% endblock nav-buttons %}
 
 {% block inner-content %}
-  <div class="col-12 col-sm-12 col-lg-8">
-    <h2 class="media-title h2-sm-p">{% translate "You will need a few items to continue:" %}</h2>
+  <div class="col-lg-6">
+    <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
     <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
       {% block media-item %}
       {% endblock media-item %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index b5df52b27..a082d44f9 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -383,13 +383,11 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --login-gov-button-font-size: var(--font-size-20px);
-  --login-gov-button-max-width: 310px;
 }
 
 @media (min-width: 992px) {
   :root {
     --login-gov-button-font-size: var(--font-size-16px);
-    --login-gov-button-max-width: 289px;
   }
 }
 
@@ -400,7 +398,6 @@ footer .footer-links li a.footer-link:visited {
   letter-spacing: 0;
   font-size: var(--login-gov-button-font-size) !important;
   font-family: "Public Sans", Roboto, system-ui;
-  max-width: var(--login-gov-button-max-width);
   text-decoration: none;
 }
 
@@ -590,7 +587,6 @@ footer .footer-links li a.footer-link:visited {
   --media-item-icon-size: calc(64rem / 16);
   --media-item-gap: calc(24rem / 16);
   --media-item-icon-margin: calc(24rem / 16);
-  --media-title-margin-top: calc(24rem / 16);
 }
 
 @media (min-width: 992px) {
@@ -598,7 +594,6 @@ footer .footer-links li a.footer-link:visited {
     --media-item-icon-size: calc(90rem / 16);
     --media-item-gap: calc(24rem / 16);
     --media-item-icon-margin: calc(32rem / 16);
-    --media-title-margin-top: calc(64rem / 16);
   }
 }
 
@@ -607,11 +602,6 @@ footer .footer-links li a.footer-link:visited {
   padding-top: calc(24rem / 16);
 }
 
-.media-title {
-  margin-top: var(--media-title-margin-top);
-  margin-bottom: calc(24rem / 16);
-}
-
 .media-list {
   gap: var(--media-item-gap);
   margin-bottom: calc(64rem / 16);

From bf2825ae651e3cd90fb09fa1e41f83d179c206a0 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 21:41:29 +0000
Subject: [PATCH 02/12] refactor: eliminate unnecessary div

---
 .../templates/eligibility/start--senior.html       | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html
index 316049297..560c1b0b6 100644
--- a/benefits/eligibility/templates/eligibility/start--senior.html
+++ b/benefits/eligibility/templates/eligibility/start--senior.html
@@ -16,14 +16,12 @@ <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row">
-    <div class="d-flex justify-content-center">
-      <div class="col-12 col-lg-6">
-        {% translate "Get started with" as button_text %}
-        <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
-          {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
-        </a>
-      </div>
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
+      {% translate "Get started with" as button_text %}
+      <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
+        {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
+      </a>
     </div>
   </div>
 {% endblock call-to-action %}

From 4d0a733429e79511ee8c03b3d311aa3b45958d8e Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 23:15:40 +0000
Subject: [PATCH 03/12] feat(elig-start): widen cta, narrow text for all
 eligibility start options

---
 .../eligibility/templates/eligibility/start--calfresh.html  | 6 +++---
 .../templates/eligibility/start--cst-agency-card.html       | 4 ++--
 .../eligibility/templates/eligibility/start--medicare.html  | 6 +++---
 .../eligibility/templates/eligibility/start--veteran.html   | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/start--calfresh.html b/benefits/eligibility/templates/eligibility/start--calfresh.html
index 4592642d2..46d8fbc22 100644
--- a/benefits/eligibility/templates/eligibility/start--calfresh.html
+++ b/benefits/eligibility/templates/eligibility/start--calfresh.html
@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       {% translate "Get started with" as button_text %}
       <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
         {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
diff --git a/benefits/eligibility/templates/eligibility/start--cst-agency-card.html b/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
index 2e26d68ba..8571109ce 100644
--- a/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
+++ b/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
@@ -16,8 +16,8 @@ <h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       <a href="{% url routes.ELIGIBILITY_CONFIRM %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue" %}</a>
     </div>
   </div>
diff --git a/benefits/eligibility/templates/eligibility/start--medicare.html b/benefits/eligibility/templates/eligibility/start--medicare.html
index 8e1cea383..e27d16a05 100644
--- a/benefits/eligibility/templates/eligibility/start--medicare.html
+++ b/benefits/eligibility/templates/eligibility/start--medicare.html
@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-    <div class="col-lg-8">
+    <div class="col-lg-6">
         <h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
     </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-    <div class="row d-flex justify-content-lg-end">
-        <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+    <div class="row justify-content-center">
+        <div class="col-12 col-lg-6">
             <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue to Medicare.gov" %}</a>
         </div>
     </div>
diff --git a/benefits/eligibility/templates/eligibility/start--veteran.html b/benefits/eligibility/templates/eligibility/start--veteran.html
index 7149ee1bd..57c0d7555 100644
--- a/benefits/eligibility/templates/eligibility/start--veteran.html
+++ b/benefits/eligibility/templates/eligibility/start--veteran.html
@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected a Veteran transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a Veteran transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       {% translate "Get started with" as button_text %}
       <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
         {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>

From 207b8492ad937f0d3ae7cb6b010d8b61a53813db Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 23:19:59 +0000
Subject: [PATCH 04/12] feat(elig-start): widen cta, narrow text for agency
 card

---
 .../templates/eligibility/start--cst-agency-card.html           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/eligibility/templates/eligibility/start--cst-agency-card.html b/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
index 8571109ce..ea8387040 100644
--- a/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
+++ b/benefits/eligibility/templates/eligibility/start--cst-agency-card.html
@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
   </div>
 {% endblock headline %}

From 64c3c313da284f656bd6f1e0cb59d316445481eb Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 00:06:29 +0000
Subject: [PATCH 05/12] refactor: an attempt to refactor media-item css

---
 .../templates/core/includes/media-item.html   | 10 ++++----
 ...tem--identification--start--login-gov.html |  6 ++---
 .../templates/eligibility/start.html          |  2 +-
 .../media-item--contactless-card--index.html  |  4 ---
 .../templates/enrollment/index.html           |  2 +-
 benefits/static/css/styles.css                | 25 +++----------------
 6 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/benefits/core/templates/core/includes/media-item.html b/benefits/core/templates/core/includes/media-item.html
index fca55aba0..d2313eab4 100644
--- a/benefits/core/templates/core/includes/media-item.html
+++ b/benefits/core/templates/core/includes/media-item.html
@@ -1,10 +1,10 @@
-<li class="media d-flex align-items-stretch w-auto">
+<li class="media">
     <div class="media-body">
         {% block heading_wrapper %}
-            <{{ heading_tag|default:"h3" }} class="media-body--heading h3">
-            {% block heading %}
-            {% endblock heading %}
-            </{{ heading_tag|default:"h3" }}>
+            <h2 class="h3">
+                {% block heading %}
+                {% endblock heading %}
+            </h2>
         {% endblock heading_wrapper %}
         {% block body %}
         {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
index 530e495aa..7e01cd4db 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
@@ -7,15 +7,15 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
+  <div>
     <p>
       {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
       {% translate "Learn more about identity verification" as text %}
       {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
     </p>
-    <div class="media-body--items">
+    <div>
       <p>{% translate "For this process you will need:" %}</p>
-      <ul>
+      <ul class="ms-lg-5 ms-0">
         <li>{% translate "Your state-issued ID card" %}</li>
         <li>{% translate "Your Social Security number" %}</li>
         <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
index 7b3a2c6b1..c61b57e9e 100644
--- a/benefits/eligibility/templates/eligibility/start.html
+++ b/benefits/eligibility/templates/eligibility/start.html
@@ -13,7 +13,7 @@
 {% block inner-content %}
   <div class="col-lg-6">
     <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
-    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+    <ul class="d-flex flex-column gap-4 list-unstyled ps-0 pb-5 mb-3">
       {% block media-item %}
       {% endblock media-item %}
       {% include "eligibility/includes/media-item--contactless-card--start.html" %}
diff --git a/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html b/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
index 56ae86486..1dd3c7b5b 100644
--- a/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
+++ b/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
@@ -1,10 +1,6 @@
 {% extends "core/includes/media-item.html" %}
 {% load i18n %}
 
-{% block heading_wrapper %}
-    {% with heading_tag="h2" %}{{ block.super }}{% endwith %}
-{% endblock heading_wrapper %}
-
 {% block heading %}
     {% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
 {% endblock heading %}
diff --git a/benefits/enrollment/templates/enrollment/index.html b/benefits/enrollment/templates/enrollment/index.html
index fbca1923c..a723eae48 100644
--- a/benefits/enrollment/templates/enrollment/index.html
+++ b/benefits/enrollment/templates/enrollment/index.html
@@ -22,7 +22,7 @@ <h1 class="pb-lg-8 pb-4">
 {% block inner-content %}
   {% block media-items %}
     <div class="col-12 col-sm-12 col-lg-8">
-      <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+      <ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
         {% include "enrollment/includes/media-item--contactless-card--index.html" %}
       </ul>
     </div>
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a082d44f9..228bc2f03 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -39,6 +39,10 @@ li {
   font-family: var(--bs-body-font-family);
 }
 
+ul li {
+  list-style-type: disc;
+}
+
 /* Paragraph: Body Text */
 /* Same sizes for all screen widths */
 p,
@@ -585,43 +589,22 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --media-item-icon-size: calc(64rem / 16);
-  --media-item-gap: calc(24rem / 16);
   --media-item-icon-margin: calc(24rem / 16);
 }
 
 @media (min-width: 992px) {
   :root {
     --media-item-icon-size: calc(90rem / 16);
-    --media-item-gap: calc(24rem / 16);
     --media-item-icon-margin: calc(32rem / 16);
   }
 }
 
-.media-body--details p:not(:first-of-type) {
-  /* All the p within .media-body--details, except for the first p - Any media item with more than one p */
-  padding-top: calc(24rem / 16);
-}
-
-.media-list {
-  gap: var(--media-item-gap);
-  margin-bottom: calc(64rem / 16);
-}
-
 .media-list-icon-left-margin {
   margin-left: calc(
     var(--media-item-icon-size) + var(--media-item-icon-margin)
   );
 }
 
-.media-list .media .media-body--details,
-.media-list .media .media-body--items li:first-child {
-  padding-top: calc(5rem / 16);
-}
-
-.media-list .media .media-body--items li {
-  list-style-type: disc;
-}
-
 /* Cards */
 
 :root {

From 00f3f38a87794d1b080553f68dff859a833dd2ff Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 00:21:54 +0000
Subject: [PATCH 06/12] fix(css): create list-disc class instead

---
 .../media-item--identification--start--login-gov.html     | 2 +-
 benefits/static/css/styles.css                            | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
index 7e01cd4db..c0b14ba9d 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
@@ -15,7 +15,7 @@
     </p>
     <div>
       <p>{% translate "For this process you will need:" %}</p>
-      <ul class="ms-lg-5 ms-0">
+      <ul class="list-disc ms-lg-5 ms-0">
         <li>{% translate "Your state-issued ID card" %}</li>
         <li>{% translate "Your Social Security number" %}</li>
         <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 228bc2f03..7b7eaa1cb 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -39,10 +39,6 @@ li {
   font-family: var(--bs-body-font-family);
 }
 
-ul li {
-  list-style-type: disc;
-}
-
 /* Paragraph: Body Text */
 /* Same sizes for all screen widths */
 p,
@@ -81,6 +77,10 @@ li {
   letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 /* Links */
 /* Same sizes for all screen widths: 18px */
 a:not(.btn):not(.card) {

From 6e16a2e596cbe9b5b50e77feb2205cb1a3487cbb Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 05:25:54 +0000
Subject: [PATCH 07/12] refactor(media-item): delete unnecessary classes, divs
 in media-item

---
 .../templates/core/includes/media-item.html   |  2 +-
 .../media-item--contactless-card--start.html  | 12 ++++-----
 ...tem--identification--start--login-gov.html | 26 ++++++++-----------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/benefits/core/templates/core/includes/media-item.html b/benefits/core/templates/core/includes/media-item.html
index d2313eab4..ba1fc98e3 100644
--- a/benefits/core/templates/core/includes/media-item.html
+++ b/benefits/core/templates/core/includes/media-item.html
@@ -1,7 +1,7 @@
 <li class="media">
     <div class="media-body">
         {% block heading_wrapper %}
-            <h2 class="h3">
+            <h2 class="h3 pb-1">
                 {% block heading %}
                 {% endblock heading %}
             </h2>
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--contactless-card--start.html b/benefits/eligibility/templates/eligibility/includes/media-item--contactless-card--start.html
index 1a278caca..a25793a28 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--contactless-card--start.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--contactless-card--start.html
@@ -6,13 +6,11 @@
 {% endblock heading %}
 
 {% block body %}
-    <div class="media-body--details">
-        <p>
-            {% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
-            {% translate "Learn more about contactless cards" as text %}
-            {% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
-        </p>
-    </div>
+    <p>
+        {% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
+        {% translate "Learn more about contactless cards" as text %}
+        {% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
+    </p>
 
     {% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
index c0b14ba9d..94c1ef13b 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
@@ -7,21 +7,17 @@
 {% endblock heading %}
 
 {% block body %}
-  <div>
-    <p>
-      {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
-      {% translate "Learn more about identity verification" as text %}
-      {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
-    </p>
-    <div>
-      <p>{% translate "For this process you will need:" %}</p>
-      <ul class="list-disc ms-lg-5 ms-0">
-        <li>{% translate "Your state-issued ID card" %}</li>
-        <li>{% translate "Your Social Security number" %}</li>
-        <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
-      </ul>
-    </div>
-  </div>
+  <p>
+    {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
+    {% translate "Learn more about identity verification" as text %}
+    {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
+  </p>
+  <p>{% translate "For this process you will need:" %}</p>
+  <ul class="list-disc ms-lg-5 ms-0">
+    <li>{% translate "Your state-issued ID card" %}</li>
+    <li>{% translate "Your Social Security number" %}</li>
+    <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
+  </ul>
 
   {% include "eligibility/includes/modal--login-gov-start-help.html" with size="modal-lg" id="modal--identity-verification" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}

From b2b91f1ffd4a87faff5a548ae1becb9185129a39 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 05:53:25 +0000
Subject: [PATCH 08/12] refactor(elig-start): remove unnecessary class, div
 from all id media-items for each flow

---
 ...edia-item--identification--start--cst-agency-card.html | 4 +---
 .../media-item--identification--start--medicare.html      | 8 +++-----
 ...edia-item--identification--start--mst-agency-card.html | 4 +---
 ...ia-item--identification--start--sbmtd-agency-card.html | 4 +---
 4 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--cst-agency-card.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--cst-agency-card.html
index ffdc2c355..93a6e43f0 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--cst-agency-card.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--cst-agency-card.html
@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
-  </div>
+  <p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--medicare.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--medicare.html
index cb277fa62..b2de89844 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--medicare.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--medicare.html
@@ -7,9 +7,7 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <p>
-      {% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
-    </p>
-  </div>
+  <p>
+    {% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
+  </p>
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--mst-agency-card.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--mst-agency-card.html
index 6f7415afd..078d338a1 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--mst-agency-card.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--mst-agency-card.html
@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
-  </div>
+  <p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--sbmtd-agency-card.html b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--sbmtd-agency-card.html
index 9d6311088..66e24cf45 100644
--- a/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--sbmtd-agency-card.html
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--identification--start--sbmtd-agency-card.html
@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-    <div class="media-body--details">
-        <p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
-    </div>
+    <p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
 {% endblock body %}

From f41cb98bfc79f0fb42f74bd02793b15a6fe2a330 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 06:09:01 +0000
Subject: [PATCH 09/12] feat(css): first pass @ get started with login.gov
 button

---
 benefits/static/css/styles.css | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 7b7eaa1cb..e59c71a76 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -387,21 +387,24 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --login-gov-button-font-size: var(--font-size-20px);
+  --login-gov-button-padding: 0.5rem;
+  --login-gov-button-line-height: 1;
 }
 
 @media (min-width: 992px) {
   :root {
     --login-gov-button-font-size: var(--font-size-16px);
+    --login-gov-button-padding: 1rem;
+    --login-gov-button-line-height: 1.5;
   }
 }
 
 .login {
   cursor: pointer;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: 0;
   font-size: var(--login-gov-button-font-size) !important;
   font-family: "Public Sans", Roboto, system-ui;
+  line-height: var(--login-gov-button-line-height);
+  text-transform: none;
   text-decoration: none;
 }
 
@@ -421,6 +424,11 @@ footer .footer-links li a.footer-link:visited {
   line-height: 1;
 }
 
+.eligibility-start .btn.btn-lg.btn-primary.login {
+  border-width: calc(4rem / 16);
+  padding: var(--login-gov-button-padding);
+}
+
 @media (min-width: 992px) {
   .login .fallback-text {
     margin: 0 0 0 5px;
@@ -429,19 +437,18 @@ footer .footer-links li a.footer-link:visited {
   }
 }
 
-/* Sign in with Login.gov (white logo) on Eligibility Start, System Enrollment Error */
-
-.eligibility-start .btn.btn-lg.btn-primary.login,
-.system-enrollment-error .btn.btn-lg.btn-primary.login {
-  padding: 10px 0;
-}
-
 .login .fallback-text.white-logo {
   background-image: url("/static/img/login-gov-logo-rev.svg");
   width: 130.9887px;
   height: 17px;
 }
 
+/* Sign in with Login.gov (white logo) on System Enrollment Error */
+
+.system-enrollment-error .btn.btn-lg.btn-primary.login {
+  padding: 10px 0;
+}
+
 /* Login.gov modal button (color logo) on Eligibility Index */
 
 .login .fallback-text.color-logo {

From e27350bf91c84b401dc0656f1627dc5e71c0f630 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 18:20:02 +0000
Subject: [PATCH 10/12] refactor(media-item): remove unused header-wrapper,
 media-body div/class

---
 .../templates/core/includes/media-item.html    | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/benefits/core/templates/core/includes/media-item.html b/benefits/core/templates/core/includes/media-item.html
index ba1fc98e3..1db071dad 100644
--- a/benefits/core/templates/core/includes/media-item.html
+++ b/benefits/core/templates/core/includes/media-item.html
@@ -1,12 +1,8 @@
-<li class="media">
-    <div class="media-body">
-        {% block heading_wrapper %}
-            <h2 class="h3 pb-1">
-                {% block heading %}
-                {% endblock heading %}
-            </h2>
-        {% endblock heading_wrapper %}
-        {% block body %}
-        {% endblock body %}
-    </div>
+<li>
+    <h2 class="h3 pb-1">
+        {% block heading %}
+        {% endblock heading %}
+    </h2>
+    {% block body %}
+    {% endblock body %}
 </li>

From ed39e8cb4dc8ad3694a6e5f7e81c37e1bdacfccf Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 18:31:01 +0000
Subject: [PATCH 11/12] fix(css): update h2-sm-p comment

---
 benefits/static/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index e59c71a76..27bfb59db 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -182,7 +182,7 @@ h2,
   }
 
   /* H2: 18px, up to Small width */
-  /* Only used on Landing Page, Eligibility Start */
+  /* Only used on Landing Page */
   .h2-sm-p {
     font-size: var(--bs-body-font-size);
     font-weight: var(--bs-body-font-weight);

From 00cc296ce8e93a0c13077fc192e313ec1989cfe2 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 18:46:28 +0000
Subject: [PATCH 12/12] fix(enrollment-index-calfresh): add list-unstyled,
 remove media-item class

---
 benefits/enrollment/templates/enrollment/index--calfresh.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/enrollment/templates/enrollment/index--calfresh.html b/benefits/enrollment/templates/enrollment/index--calfresh.html
index faaa363b8..56df5c2c1 100644
--- a/benefits/enrollment/templates/enrollment/index--calfresh.html
+++ b/benefits/enrollment/templates/enrollment/index--calfresh.html
@@ -3,7 +3,7 @@
 
 {% block media-items %}
   <div class="col-12 col-sm-12 col-lg-8">
-    <ul class="media-list mb-5 mx-0 px-0 d-flex justify-content-center flex-column">
+    <ul class="mb-5 mx-0 px-0 d-flex list-unstyled justify-content-center flex-column">
       {% include "enrollment/includes/media-item--contactless-card--index--calfresh.html" %}
     </ul>
   </div>