Docs: replaced deprecated .display-6 with .fs-3xl .fw-light

Spotted in #42487

Author: julien-deramond

site/src/assets/examples/features/index.astro

@@ -150,7 +150,7 @@ export const extra_css = ['features.css']
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
-            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
+            <h3 class="pt-5 mt-5 mb-4 fs-3xl lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -171,7 +171,7 @@ export const extra_css = ['features.css']
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
-            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
+            <h3 class="pt-5 mt-5 mb-4 fs-3xl lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -192,7 +192,7 @@ export const extra_css = ['features.css']
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
-            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3>
+            <h3 class="pt-5 mt-5 mb-4 fs-3xl lh-1 fw-bold">Another longer title belongs here</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">

site/src/assets/examples/pricing/index.astro

@@ -89,7 +89,7 @@ export const extra_css = ['pricing.css']
       </div>
     </div>
 
-    <h2 class="display-6 text-center mb-4">Compare plans</h2>
+    <h2 class="fs-3xl fw-light text-center mb-4">Compare plans</h2>
 
     <div class="table-responsive">
       <table class="table text-center">