Fix: Login.gov button width on Tablet

[machikoyasuda]

fix #1574

What is the problem anyway?

At this specific range of widths (1279px - 992px), the Login.gov button breaks into 2 lines in a way that is not part of the design.

The button should only exist in 2 designs, as shown on Figma:

What this PR does

• Make sure the Login.gov button only shows up in those 2 ways
• Ensure the 2 Login.gov buttons are the correct dimensions
• Modify the start.html so that I can adjust the columns for the start--seniors includes only, but keep the rest the same.
• Widened the container from col-3 to col-4 to allow for the button to remain at width: 289px as the window scales down from 1279px to the maximum of 992px. Add flex-box classes and a max-width declaration so that the button stays at the proper width and also is right-aligned. This widening is a one-off for this includes with the Login.gov button only. Not to be done for anything else.

How to test

• Get to Elig Start for Login.gov/Seniors and check the button in all possible screen widths
• Ensure no regressions on the rest of the Elig Starts (Veterans, Agency Card)
• Make sure button looks good in focus, hover modes

Documentation: Sign into Login.gov button specs

Desktop/Tablet

• Width: 289px
• Height: 41px
• Font size: 16px
• Space between top/bottom of the text and the edge: 12px (Add the 10px padding and 2 px border for total 12px)

Mobile

• Width: 310px
• Height: 72px
• Font size: 20px
• Space between top/bottom of the text and the edge: 12px

[thekaveman]

✅ Get to Elig Start for Login.gov/Seniors and check the button in all possible screen widths
✅ Ensure no regressions on the rest of the Elig Starts (Veterans, Agency Card)
✅ Make sure button looks good in focus, hover modes