[AV-77311] Adjust screen size considerations for landing page.

Author: sarahlwelton

src/css/landing-page.css

@@ -332,7 +332,7 @@
 }
 
 .doc.landing-page-capella .tabpanel > .tabs-image {
-  width: 500px;
+  width: 50%;
 }
 
 /* CSS for How Do You Want To Start Building Today? section */
@@ -363,14 +363,15 @@
   box-shadow: 5px 10px 29.48px 0 rgba(0, 0, 0, 0.4);
 }
 
-.doc.landing-page-capella .card-box > .fa-regular {
+.doc.landing-page-capella .card-box > .svg-inline--fa {
   color: var(--color-brand-red);
+  font-size: 2em;
 }
 
 .doc.landing-page-capella .card-box > h3 {
   margin-block-start: 0;
-  padding-left: 0;
-  text-align: center;
+  padding-left: 1.5em;
+  text-align: left;
 }
 
 .doc.landing-page-capella .card-box > p {
@@ -399,7 +400,7 @@
 
 /* Screen size considerations */
 
-@media screen and (min-width: 340px) and (max-width: 430px) {
+@media screen and (min-width: 340px) and (max-width: 499px) {
   .doc.landing-page-capella .top-row > .positioned-image {
     min-width: 130px;
     margin-top: -37.5rem; /* Adjust to position image right below the div */
@@ -467,7 +468,7 @@
   }
 }
 
-@media screen and (min-width: 768px) and (max-width: 1280px) {
+@media screen and (min-width: 701px) and (max-width: 1699px) {
   .doc.landing-page-capella .top-row > .positioned-image {
     min-width: 150px;
     margin-top: -15rem; /* Adjust to position image right below the div */
@@ -501,6 +502,20 @@
   }
 }
 
+@media screen and (min-width: 1700px) {
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 30%;
+  }
+}
+
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
   padding: 20px;