Improve mobile responsiveness of Duo Pro Discover page

What does this MR do and why?

Improve Discover Duo Pro page mobile responsiveness

• Replace flex classes in first section with responsive grid to stack Section 1 items
• Made video thumbnail responsive and stackable, moved width declaration into CSS
• Update "Code Suggestions" container widths for improved aesthetic on mobile
• Stack all sections and cards on sm and md size screens per this discussion

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before

duo-pro-discover-page-mobile-before

After new-after-with-buttons new-after-mobile-buttons

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

After small + medium breakpoint / mobile screenshots:

|

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Start your GDK / login as root
2. Create a new Group in the UI
3. In rails console - bin/rails c

      g = Group.last
      u = User.first
      g.owner = u
      g.save!
      Feature.enable(:duo_pro_trials)
      GitlabSubscriptions::AddOn.find_or_create_by(name: 'code_suggestions', description: GitlabSubscriptions::AddOn.descriptions[:code_suggestions])
      GitlabSubscription.last.update(trial: true, trial_starts_on: 45.days.ago, trial_ends_on: 15.days.ago)
      GitlabSubscriptions::AddOnPurchase.create(subscription_add_on_id: GitlabSubscriptions::AddOn.find_by(name: 'code_suggestions').id, namespace: Group.last, started_at: 60.days.ago, expires_on: Date.today, trial: true, quantity: 1, purchase_xid: ‘1’,  organization_id: 1)

4. Visit Duo Pro Discover page directly or navigate there via the activated widget from a group specific page http://localhost:3000/groups/#{YOUR_GROUP_NAME}/-/add_ons/discover_duo_pro

Related to #466736