final styling updates (hopefully)

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -22,7 +22,6 @@ import servicePackageRadio from '@/layouts/service-packages/service-package-ques
 import partTypeStrings from '@/constants/part-type-strings';
 import { useMainStore } from '@/store';
 import { getPriceOfLineItem } from '@/helpers/price-calculator';
-import { getHighestFullySatisfiedTier } from '@/helpers/service-package-helper.js';
 
 const glassLocations = damageLocationsSelected;
 
@@ -62,7 +61,6 @@ export default {
             if (this.availableLineItems?.lineItems) {
                 return this.availableLineItems.lineItems;
             }
-
             return this.availableLineItems ?? [];
         },
         servicePackageAnswers() {
@@ -146,9 +144,6 @@ export default {
         }
     },
     watch: {
-        availableLineItems() {
-            this.selectDefaultPackage();
-        },
         selectedPackageName(newValue) {
             const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
             this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@@ -217,17 +212,6 @@ export default {
             });
             return vapsPrice;
         },
-        selectDefaultPackage() {
-            const { glassToReplace, isRepair } = store.order.damage;
-            const { vaps } = store.order.lineItems;
-            const defaultTier = getHighestFullySatisfiedTier(
-                glassToReplace ?? [],
-                this.availableLineItems,
-                isRepair,
-                vaps ?? []
-            );
-            this.selectedPackageName = defaultTier;
-        },
         getVapsLineItemsForSelectedPackage(packageName) {
             const vapsLineItemsForSelectedPackage = [];
             if (packageName === packageNames.TIER_TWO) {
@@ -289,5 +273,19 @@ export default {
 .service-package-question-text {
     font-weight: 500;
     text-align: center;
+    margin-bottom: 0;
+}
+
+@include media-breakpoint-up(md) {
+    :deep(.package-main) {
+        padding: 0 1.5rem 0 1.5rem;
+        .package-wrapper:nth-child(2) {
+            margin-left: 0.5rem;
+        }
+        .package-wrapper:nth-child(3) {
+            margin-right: 0;
+            margin-left: 0.5rem;
+         }
+    }
 }
 </style>

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -173,7 +173,6 @@ export default {
                     width: 100%;
                     padding: 10px;
                     border: 0.666667px solid #dddddd;
-                    //box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                     border-radius: 0.25rem;
                     overflow: hidden;
@@ -250,7 +249,7 @@ export default {
                 font-weight: $font-weight-bold;
                 margin-top: 20px;
                 font-size: 0.875rem;
-                line-height: 21px;
+                line-height: 24px;
             }
 
             .package-specs {
@@ -323,12 +322,16 @@ export default {
                         color: #075f35;
                         font-size: 0.875rem;
                         font-weight: $font-weight-bold;
-                        padding: 1rem 0 1rem 0;
+                        padding: 0.35rem 0 1rem 0;
                     }
                 }
             }
 
             .pricing-info-mobile {
+                display: flex;
+                flex: 1;
+                justify-content: flex-end;
+                margin-top: 0.25rem;
                 @include media-breakpoint-up(md) {
                     display: none;
                 }

src/layouts/service-packages/service-packages.vue

@@ -34,6 +34,7 @@
                     </div>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
+                        class="back-link"
                         :isForwardActionDisabled="!meta.valid"
                         :isForwardButtonHidden="true"
                         @backClicked="navigateBack" />
@@ -219,8 +220,16 @@ export default {
 <style lang="scss" scoped>
 .iss-heritage-container-width {
     .service-packages-container {
-        @media (min-width: 992px) {
+        @include media-breakpoint-up(md) {
             width: 100%;
+            .continue-button {
+                width: 50%
+            }
+        }
+        @include media-breakpoint-down(md) {
+            .continue-button {
+                width: 90%
+            }
         }
         position: relative;
         min-height: 1px;
@@ -243,8 +252,7 @@ export default {
     }
 }
 .disclaimer {
-    margin: 0.5rem 0 1.5rem 0;
-    //padding-left: 3rem;
+    margin: 0.5rem 1rem 1.5rem 1.5rem;
     :deep(.external-text) {
         text-decoration: none;
     }
@@ -255,7 +263,7 @@ export default {
     }
 }
 
-.continue-button {
-    width: 50%
+.back-link {
+    margin-left: 1rem;
 }
 </style>