Card sizing for security dashboard discovery moment experiment

What does this MR do and why?

Card sizing for security dashboard discovery moment experiment

Related to #365499

Screenshots or screen recordings

Before	After Large	After Medium	After Small

How to set up and validate locally

1. Act like SAAS https://docs.gitlab.com/ee/development/ee_features.html#act-as-saas
2. Enable the experiment flag bin/rails c => Feature.enable(:showcase_free_security_features)
3. Create a group GROUP and a project PROJECT
4. Go to the Security tab of the group and of the project

• http://gdk.test:3000/groups/GROUP/-/security/discover
• http://gdk.test:3000/GROUP/PROJECT/-/security/discover

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

ee/app/assets/javascripts/vue_shared/showcase/card_security_showcase_app.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="gl-m-5">
-    <div class="row gl-mb-4 col-lg-6 col-xs-12 gl-p-0">
+    <div class="gl-mb-4 col-lg-6 col-xs-12 gl-p-0">
       <h2 class="gl-col-12 gl-font-size-h2 gl-text-gray-900">
         {{ $options.i18n.identify.title }}
       </h2>
@@ -41,7 +41,9 @@ export default {
       </p>
     </div>
 
-    <div class="row gl-mb-8">
+    <div
+      class="gl-display-grid gl-sm-grid-template-columns-1 gl-md-grid-template-columns-2 gl-lg-grid-template-columns-2 gl-mb-8"
+    >
       <card-showcase
         :title="$options.i18n.sast.title"
         :description="$options.i18n.sast.description"
@@ -60,7 +62,7 @@ export default {
       />
     </div>
 
-    <div class="row gl-mb-4 col-lg-6 col-xs-12 gl-p-0">
+    <div class="gl-mb-4 col-lg-6 col-xs-12 gl-p-0">
       <h2 class="gl-col-12 gl-font-size-h2 gl-text-gray-900">
         {{ $options.i18n.takeNextLevel.title }}
       </h2>
@@ -69,7 +71,9 @@ export default {
       </p>
     </div>
 
-    <div class="row gl-mb-8">
+    <div
+      class="gl-display-grid gl-sm-grid-template-columns-1 gl-md-grid-template-columns-4 gl-lg-grid-template-columns-4 gl-mb-8"
+    >
       <card-showcase
         :title="$options.i18n.vulnerability_management.title"
         :description="$options.i18n.vulnerability_management.description"