From f65839054e63f79b6a8a775e2c8eccbcefce9636 Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Date: Tue, 2 Sep 2025 14:47:16 -0400
Subject: [PATCH] Migrate frontend to container queries a to c

Migrates frontend assets to container queries within directories that
start with a-c.
---
 .../components/links_to_spam_input.vue             |  4 ++--
 .../components/activity_history_item.vue           |  4 ++--
 .../components/notes/abuse_report_add_note.vue     |  3 +--
 .../components/notes/abuse_report_note.vue         |  2 +-
 .../abuse_report/components/report_header.vue      |  8 +++++---
 .../abuse_report/components/reported_content.vue   | 12 ++++++++----
 .../admin/abuse_report/components/user_detail.vue  |  2 +-
 .../admin/deploy_keys/components/table.vue         |  8 ++++----
 .../components/alert_management_table.vue          | 12 ++++++------
 .../alerts_settings/components/alerts_form.vue     |  2 +-
 .../components/alerts_settings_form.vue            |  2 +-
 .../analytics/cycle_analytics/components/base.vue  |  2 +-
 .../components/value_stream_filters.vue            |  4 ++--
 .../analytics/shared/components/daterange.vue      | 10 +++++-----
 .../usage_trends/components/usage_counts.vue       |  4 ++--
 .../javascripts/badges/components/badge_list.vue   |  4 ++--
 .../components/open_mr_badge/open_mr_badge.vue     |  4 ++--
 .../javascripts/blob/components/blob_content.vue   |  2 +-
 .../blob/components/blob_content_error.vue         |  2 +-
 .../javascripts/blob/components/blob_header.vue    |  2 +-
 .../components/blob_header_default_actions.vue     |  5 ++++-
 .../filepath_form/components/filepath_form.vue     |  4 +++-
 .../javascripts/blob/notebook/notebook_viewer.vue  |  6 +++---
 app/assets/javascripts/blob/pdf/pdf_viewer.vue     |  6 +++---
 app/assets/javascripts/blob/sketch/index.js        |  2 +-
 .../branches/components/divergence_graph.vue       |  4 ++--
 .../javascripts/branches/components/graph_bar.vue  |  2 +-
 .../ci/artifacts/components/artifact_row.vue       |  8 ++++----
 .../artifacts/components/job_artifacts_table.vue   |  2 +-
 .../ci/catalog/components/list/catalog_tabs.vue    |  2 +-
 .../components/list/ci_resources_list_item.vue     |  6 +++---
 .../javascripts/ci/ci_lint/components/ci_lint.vue  |  8 ++++----
 .../components/ci_variable_settings.vue            |  2 +-
 .../components/ci_variable_table.vue               |  8 ++++----
 .../pipeline_inputs_table.vue                      |  4 ++--
 .../ci/common/private/job_links_layer.vue          |  2 +-
 .../ci/job_details/components/job_header.vue       |  8 ++++----
 .../ci/job_details/components/job_log_top_bar.vue  |  2 +-
 .../ci/job_details/components/log/log.vue          |  2 +-
 .../components/sidebar/external_links_block.vue    |  2 +-
 .../components/sidebar/sidebar_header.vue          |  4 ++--
 .../sidebar/sidebar_job_details_container.vue      |  2 +-
 app/assets/javascripts/ci/job_details/job_app.vue  |  2 +-
 .../ci/jobs_page/components/job_cells/job_cell.vue |  4 +++-
 .../ci/jobs_page/components/jobs_table_tabs.vue    |  2 +-
 .../graph/components/graph_component.vue           |  4 ++--
 .../graph/components/graph_view_selector.vue       |  4 ++--
 .../graph/components/linked_graph_wrapper.vue      |  2 +-
 .../graph/components/linked_pipeline.vue           |  2 +-
 .../graph/components/linked_pipelines_column.vue   |  4 ++--
 .../ci/pipeline_details/header/pipeline_header.vue |  8 ++++++--
 .../jobs/components/failed_jobs_table.vue          |  2 +-
 .../test_reports/test_suite_table.vue              | 14 +++++++-------
 .../pipeline_details/test_reports/test_summary.vue |  4 ++--
 .../test_reports/test_summary_table.vue            |  2 +-
 .../components/editor/ci_editor_header.vue         |  2 +-
 .../components/validate/ci_validate.vue            |  2 +-
 .../ci/pipeline_editor/pipeline_editor_home.vue    |  2 +-
 .../components/pipeline_variables_form.vue         |  6 +++---
 .../components/pipeline_schedules_form.vue         | 12 ++++++------
 .../components/pipeline_variables_form_group.vue   |  6 +++---
 .../components/empty_state/ci_cards.vue            |  2 +-
 .../ci/pipelines_page/components/nav_controls.vue  |  2 +-
 .../javascripts/ci/pipelines_page/pipelines.vue    |  4 ++--
 .../components/cells/runner_summary_cell.vue       |  2 +-
 .../registration/gke_node_pool_group.vue           | 10 ++++++----
 .../instructions/runner_cli_instructions.vue       |  2 +-
 .../ci/runner/components/runner_list.vue           |  4 ++--
 .../ci/runner/group_runners/group_runners_app.vue  | 10 ++++++++--
 .../clusters/forms/components/integration_form.vue |  4 ++--
 .../clusters_list/components/agent_table.vue       |  4 ++--
 .../components/agents_configs_table.vue            |  2 +-
 .../clusters_list/components/clusters.vue          |  2 +-
 .../clusters_list/components/clusters_actions.vue  |  2 +-
 .../comment_templates/components/form.vue          |  2 +-
 .../contributors/components/individual_chart.vue   |  2 +-
 .../components/credentials_filter_sort_app.vue     |  2 +-
 .../javascripts/custom_emoji/components/app.vue    |  2 +-
 .../components/notes/abuse_report_add_note_spec.js |  2 +-
 .../__snapshots__/alerts_form_spec.js.snap         |  2 +-
 .../components/blob_header_default_actions_spec.js |  2 +-
 .../__snapshots__/divergence_graph_spec.js.snap    |  6 +++---
 .../frontend/branches/components/graph_bar_spec.js |  2 +-
 .../components/list/ci_resources_list_item_spec.js |  4 +++-
 84 files changed, 185 insertions(+), 159 deletions(-)

diff --git a/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue b/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue
index 4873c9fe0535ba..e62d96d3b6490a 100644
--- a/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue
+++ b/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue
@@ -36,7 +36,7 @@ export default {
   <div>
     <template v-for="(link, index) in links">
       <div :key="index" class="row">
-        <div class="col-lg-8">
+        <div class="gl-col-lg-8">
           <gl-form-group :label="$options.i18n.label" :label-for="`spam-link-${index}`">
             <gl-form-input
               :id="`spam-link-${index}`"
@@ -50,7 +50,7 @@ export default {
       </div>
     </template>
     <div class="row">
-      <div class="col-lg-8">
+      <div class="gl-col-lg-8">
         <gl-button variant="link" icon="plus" class="gl-float-right" @click="addAnotherInput">
           {{ $options.i18n.addAnotherText }}
         </gl-button>
diff --git a/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
index 530a80ef7d8a24..a4fefd28b1d247 100644
--- a/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
@@ -31,12 +31,12 @@ export default {
 
 <template>
   <history-item icon="warning">
-    <div class="gl-flex gl-flex-col sm:gl-flex-row">
+    <div class="gl-flex gl-flex-col @sm/panel:gl-flex-row">
       <gl-sprintf :message="$options.i18n.reportedByForCategory">
         <template #name>{{ reporterName }}</template>
         <template #category>{{ report.category }}</template>
       </gl-sprintf>
-      <time-ago-tooltip :time="report.reportedAt" class="gl-text-subtle sm:gl-ml-3" />
+      <time-ago-tooltip :time="report.reportedAt" class="gl-text-subtle @sm/panel:gl-ml-3" />
     </div>
   </history-item>
 </template>
diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
index 73d189ba53e966..a066d66d9a82ac 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
@@ -53,8 +53,7 @@ export default {
     timelineEntryClasses() {
       return this.isNewDiscussion
         ? 'timeline-entry note-form'
-        : // eslint-disable-next-line @gitlab/require-i18n-strings
-          'note note-wrapper note-comment discussion-reply-holder !gl-border-t-0 clearfix';
+        : 'note note-wrapper note-comment discussion-reply-holder !gl-border-t-0 gl-clearfix';
     },
     timelineEntryInnerClasses() {
       return this.isNewDiscussion ? 'timeline-entry-inner' : '';
diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
index de48588954562e..6adca7f9ce13ea 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
@@ -105,7 +105,7 @@ export default {
             :note-id="note.id"
             :note-url="note.url"
           >
-            <span v-if="note.createdAt" class="gl-hidden sm:gl-inline">&middot;</span>
+            <span v-if="note.createdAt" class="gl-hidden @sm/panel:gl-inline">&middot;</span>
           </note-header>
           <div class="gl-inline-flex">
             <abuse-report-note-actions
diff --git a/app/assets/javascripts/admin/abuse_report/components/report_header.vue b/app/assets/javascripts/admin/abuse_report/components/report_header.vue
index 0caf0e8f95cde5..aad00797762014 100644
--- a/app/assets/javascripts/admin/abuse_report/components/report_header.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/report_header.vue
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <header class="gl-border-b gl-flex gl-flex-col gl-justify-between gl-py-4 sm:gl-flex-row">
+  <header class="gl-border-b gl-flex gl-flex-col gl-justify-between gl-py-4 @sm/panel:gl-flex-row">
     <div class="gl-flex gl-items-center gl-gap-3">
       <gl-badge :variant="badgeVariant" :icon="badgeIcon" :aria-label="badgeText">
         {{ badgeText }}
@@ -62,14 +62,16 @@ export default {
       </h1>
       <gl-link :href="user.path"> @{{ user.username }} </gl-link>
     </div>
-    <nav class="gl-mt-4 gl-flex gl-flex-col sm:gl-mt-0 sm:gl-flex-row sm:gl-items-center">
+    <nav
+      class="gl-mt-4 gl-flex gl-flex-col @sm/panel:gl-mt-0 @sm/panel:gl-flex-row @sm/panel:gl-items-center"
+    >
       <gl-button :href="user.adminPath">
         {{ $options.i18n.adminProfile }}
       </gl-button>
       <report-actions
         :user="user"
         :report="report"
-        class="gl-mt-3 sm:gl-ml-3 sm:gl-mt-0"
+        class="gl-mt-3 @sm/panel:gl-ml-3 @sm/panel:gl-mt-0"
         @closeReport="closeReport"
         v-on="$listeners"
       />
diff --git a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
index 53f1b1ad504efe..ecb608bae057dc 100644
--- a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
@@ -64,12 +64,16 @@ export default {
 
 <template>
   <div class="gl-pt-6">
-    <div class="gl-flex gl-flex-col gl-items-center gl-justify-between gl-pb-3 sm:gl-flex-row">
+    <div
+      class="gl-flex gl-flex-col gl-items-center gl-justify-between gl-pb-3 @sm/panel:gl-flex-row"
+    >
       <h2 class="gl-mb-2 gl-mt-2 gl-text-size-h1">
         {{ $options.i18n.reportTypes[reportType] }}
       </h2>
 
-      <div class="gl-mt-3 gl-flex gl-flex-col gl-items-stretch sm:gl-mt-0 sm:gl-flex-row">
+      <div
+        class="gl-mt-3 gl-flex gl-flex-col gl-items-stretch @sm/panel:gl-mt-0 @sm/panel:gl-flex-row"
+      >
         <template v-if="report.screenshot">
           <gl-button data-testid="screenshot-button" @click="toggleScreenshotModal">
             {{ $options.i18n.viewScreenshot }}
@@ -91,7 +95,7 @@ export default {
           v-if="report.url"
           data-testid="report-url-button"
           :href="report.url"
-          class="gl-mt-3 sm:gl-ml-3 sm:gl-mt-0"
+          class="gl-mt-3 @sm/panel:gl-ml-3 @sm/panel:gl-mt-0"
         >
           {{ $options.i18n.goToType[reportType] }}
         </gl-button>
@@ -124,7 +128,7 @@ export default {
             </gl-link>
             <time-ago-tooltip
               :time="report.reportedAt"
-              class="gl-ml-3 gl-w-full gl-text-subtle sm:gl-w-auto"
+              class="gl-ml-3 gl-w-full gl-text-subtle @sm/panel:gl-w-auto"
             />
           </div>
         </div>
diff --git a/app/assets/javascripts/admin/abuse_report/components/user_detail.vue b/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
index a30f95624b8321..bbc27ea994939c 100644
--- a/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
@@ -16,7 +16,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-4 gl-flex gl-flex-col sm:gl-flex-row">
+  <div class="gl-mb-4 gl-flex gl-flex-col @sm/panel:gl-flex-row">
     <p class="gl-mb-0 gl-grow gl-basis-0 gl-font-bold">
       {{ label }}
     </p>
diff --git a/app/assets/javascripts/admin/deploy_keys/components/table.vue b/app/assets/javascripts/admin/deploy_keys/components/table.vue
index c6baa363a9a622..fa37f72c42350a 100644
--- a/app/assets/javascripts/admin/deploy_keys/components/table.vue
+++ b/app/assets/javascripts/admin/deploy_keys/components/table.vue
@@ -44,12 +44,12 @@ export default {
     {
       key: 'fingerprint_sha256',
       label: __('Fingerprint (SHA256)'),
-      tdClass: 'md:gl-max-w-26',
+      tdClass: '@md/panel:gl-max-w-26',
     },
     {
       key: 'fingerprint',
       label: __('Fingerprint (MD5)'),
-      tdClass: 'md:gl-max-w-26',
+      tdClass: '@md/panel:gl-max-w-26',
     },
     {
       key: 'projects',
@@ -62,8 +62,8 @@ export default {
     {
       key: 'actions',
       label: __('Actions'),
-      tdClass: 'lg:gl-w-px gl-whitespace-nowrap',
-      thClass: 'lg:gl-w-px gl-whitespace-nowrap',
+      tdClass: '@lg/panel:gl-w-px gl-whitespace-nowrap',
+      thClass: '@lg/panel:gl-w-px gl-whitespace-nowrap',
     },
   ],
   modal: {
diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue
index ec955ad59cc193..f10b1abd81a61b 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_table.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue
@@ -55,7 +55,7 @@ export default {
       variant: 'secondary',
       thClass: `gl-w-1/8`,
       thAttr: TH_TEST_ID,
-      tdClass: `${tdClass} rounded-top text-capitalize sortable-cell`,
+      tdClass: `${tdClass} !gl-rounded-t-base !gl-capitalize sortable-cell`,
       sortable: true,
     },
     {
@@ -96,7 +96,7 @@ export default {
       label: s__('AlertManagement|Status'),
       variant: 'secondary',
       thClass: `gl-w-3/20`,
-      tdClass: `${tdClass} rounded-bottom sortable-cell`,
+      tdClass: `${tdClass} !gl-rounded-b-base sortable-cell`,
       sortable: true,
     },
   ],
@@ -337,11 +337,11 @@ export default {
         >
           <template #cell(severity)="{ item }">
             <div
-              class="justify-content-between gl-inline-flex gl-items-center"
+              class="gl-inline-flex gl-items-center !gl-justify-between"
               data-testid="severityField"
             >
               <gl-icon
-                class="mr-2"
+                class="!gl-mr-3"
                 :size="12"
                 :name="`severity-${item.severity.toLowerCase()}`"
                 :class="`icon-${item.severity.toLowerCase()}`"
@@ -360,7 +360,7 @@ export default {
 
           <template #cell(alertLabel)="{ item }">
             <div
-              class="text-truncate gl-max-w-full"
+              class="gl-max-w-full gl-truncate"
               :title="`${item.iid} - ${item.title}`"
               data-testid="idField"
             >
@@ -427,7 +427,7 @@ export default {
           </template>
 
           <template #table-busy>
-            <gl-loading-icon size="lg" color="dark" class="mt-3" />
+            <gl-loading-icon size="lg" color="dark" class="!gl-mt-5" />
           </template>
         </gl-table>
       </template>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_form.vue
index c9aa524d2d09f0..284aa6db55864c 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_form.vue
@@ -80,7 +80,7 @@ export default {
       <gl-form-group
         label-size="sm"
         label-for="alert-integration-settings-issue-template"
-        class="col-8 col-md-9 gl-px-6"
+        class="gl-col-8 gl-col-md-9 gl-px-6"
       >
         <label class="gl-inline-flex" for="alert-integration-settings-issue-template">
           {{ $options.i18n.incidentTemplate.label }}
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index 54910c2c476103..f09220678a4e43 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -521,7 +521,7 @@ export default {
             </div>
           </template>
         </div>
-        <div class="gl-flex gl-flex-col gl-justify-start gl-gap-3 md:gl-flex-row">
+        <div class="gl-flex gl-flex-col gl-justify-start gl-gap-3 @md/panel:gl-flex-row">
           <gl-button
             :disabled="!canSubmitForm"
             variant="confirm"
diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/base.vue b/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
index 5df7d97709103e..a0f36781b2ee7e 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
@@ -154,7 +154,7 @@ export default {
       @setDateRange="onSetDateRange"
       @setPredefinedDateRange="setPredefinedDateRange"
     />
-    <div class="gl-flex gl-flex-col md:gl-flex-row">
+    <div class="gl-flex gl-flex-col @md/panel:gl-flex-row">
       <path-navigation
         v-if="displayPathNavigation"
         data-testid="vsa-path-navigation"
diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
index deffc3715264a7..25afda4c393855 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
@@ -136,7 +136,7 @@ export default {
     <hr v-if="shouldShowFilterDropdowns" class="-gl-mx-5 gl-my-5" />
     <div
       v-if="shouldShowFilterDropdowns"
-      class="gl-flex gl-flex-col gl-gap-5 lg:gl-flex-row"
+      class="gl-flex gl-flex-col gl-gap-5 @lg/panel:gl-flex-row"
       data-testid="vsa-filter-dropdowns-container"
     >
       <projects-dropdown-filter
@@ -151,7 +151,7 @@ export default {
       />
       <div
         v-if="shouldShowDateRangeFilters"
-        class="gl-flex gl-flex-col gl-gap-3 lg:gl-flex-row"
+        class="gl-flex gl-flex-col gl-gap-3 @lg/panel:gl-flex-row"
         data-testid="vsa-date-range-filter-container"
       >
         <date-ranges-dropdown
diff --git a/app/assets/javascripts/analytics/shared/components/daterange.vue b/app/assets/javascripts/analytics/shared/components/daterange.vue
index b6ca02b3c35b28..34c82b37250a07 100644
--- a/app/assets/javascripts/analytics/shared/components/daterange.vue
+++ b/app/assets/javascripts/analytics/shared/components/daterange.vue
@@ -73,11 +73,11 @@ export default {
 <template>
   <div
     v-if="show"
-    class="align-items-lg-center justify-content-lg-end gl-flex gl-flex-col md:gl-flex-row"
+    class="gl-flex gl-flex-col @md/panel:gl-flex-row @lg/panel:!gl-items-center @lg/panel:!gl-justify-end"
   >
     <gl-daterange-picker
       v-model="dateRange"
-      class="gl-flex gl-flex-col gl-flex-wrap gl-justify-end !gl-gap-3 sm:gl-flex-row md:gl-flex-nowrap"
+      class="gl-flex gl-flex-col gl-flex-wrap gl-justify-end !gl-gap-3 @sm/panel:gl-flex-row @md/panel:gl-flex-nowrap"
       :default-start-date="startDate"
       :default-end-date="endDate"
       :default-min-date="minDate"
@@ -89,9 +89,9 @@ export default {
       :to-label="__('To')"
       theme="animate-picker"
       width="xl"
-      start-picker-class="js-daterange-picker-from gl-flex gl-flex-col md:gl-flex-row md:gl-items-center gl-grow"
-      end-picker-class="js-daterange-picker-to gl-flex gl-flex-col md:gl-flex-row md:gl-items-center gl-grow"
-      label-class="gl-mb-3 sm:gl-mb-0"
+      start-picker-class="js-daterange-picker-from gl-flex gl-flex-col @md/panel:gl-flex-row @md/panel:gl-items-center gl-grow"
+      end-picker-class="js-daterange-picker-to gl-flex gl-flex-col @md/panel:gl-flex-row @md/panel:gl-items-center gl-grow"
+      label-class="gl-mb-3 @sm/panel:gl-mb-0"
     >
       <template #default="{ daysSelected }">
         <div class="gl-text-right">
diff --git a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
index cd9fed3bec0674..ac9cf28c07fdd2 100644
--- a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
+++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
@@ -63,13 +63,13 @@ export default {
 <template>
   <div>
     <page-heading :heading="$options.i18n.pageTitle" />
-    <div class="gl-my-6 gl-flex gl-flex-col gl-items-start md:gl-flex-row">
+    <div class="gl-my-6 gl-flex gl-flex-col gl-items-start @md/panel:gl-flex-row">
       <gl-skeleton-loader v-if="$apollo.queries.counts.loading" />
       <template v-else>
         <gl-single-stat
           v-for="count in counts"
           :key="count.key"
-          class="gl-my-4 gl-pr-9 md:gl-mb-0 md:gl-mt-0"
+          class="gl-my-4 gl-pr-9 @md/panel:gl-mb-0 @md/panel:gl-mt-0"
           :value="`${count.value}`"
           :title="count.label"
           :should-animate="true"
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index 20257b93862ae1..b21d24a7263898 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -109,14 +109,14 @@ export default {
       data-testid="badge-list"
     >
       <template #cell(name)="{ item }">
-        <label v-gl-tooltip class="label-bold str-truncated mb-0" :title="item.name">{{
+        <label v-gl-tooltip class="label-bold str-truncated !gl-mb-0" :title="item.name">{{
           item.name
         }}</label>
         <gl-badge>{{ badgeKindText(item) }}</gl-badge>
       </template>
 
       <template #cell(badge)="{ item }">
-        <div class="overflow-hidden">
+        <div class="!gl-overflow-hidden">
           <badge :image-url="item.renderedImageUrl" :link-url="item.renderedLinkUrl" />
         </div>
       </template>
diff --git a/app/assets/javascripts/badges/components/open_mr_badge/open_mr_badge.vue b/app/assets/javascripts/badges/components/open_mr_badge/open_mr_badge.vue
index ab3fd9d935f5d8..cd1848a9bd4d93 100644
--- a/app/assets/javascripts/badges/components/open_mr_badge/open_mr_badge.vue
+++ b/app/assets/javascripts/badges/components/open_mr_badge/open_mr_badge.vue
@@ -165,12 +165,12 @@ export default {
       </div>
     </template>
 
-    <div v-if="!openMrs.length || isLoading" class="gl-w-34 gl-px-5 gl-py-3 md:gl-w-48">
+    <div v-if="!openMrs.length || isLoading" class="gl-w-34 gl-px-5 gl-py-3 @md/panel:gl-w-48">
       <gl-skeleton-loader :height="15">
         <rect width="250" height="15" rx="4" />
       </gl-skeleton-loader>
     </div>
-    <ul v-else class="gl-m-0 gl-w-34 gl-p-0 md:gl-w-48">
+    <ul v-else class="gl-m-0 gl-w-34 gl-p-0 @md/panel:gl-w-48">
       <gl-disclosure-dropdown-item
         v-for="mergeRequest in openMrs"
         :key="mergeRequest.iid"
diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue
index 66f5d6eaa650af..37004a557593d4 100644
--- a/app/assets/javascripts/blob/components/blob_content.vue
+++ b/app/assets/javascripts/blob/components/blob_content.vue
@@ -109,7 +109,7 @@ export default {
 </script>
 <template>
   <div class="blob-viewer" :data-type="activeViewer.type" :data-loaded="isContentLoaded">
-    <gl-loading-icon v-if="loading" size="lg" color="dark" class="my-4 mx-auto" />
+    <gl-loading-icon v-if="loading" size="lg" color="dark" class="!gl-mx-auto !gl-my-6" />
 
     <template v-else>
       <blob-content-error
diff --git a/app/assets/javascripts/blob/components/blob_content_error.vue b/app/assets/javascripts/blob/components/blob_content_error.vue
index 138f611251de86..e6e1a6ee9af929 100644
--- a/app/assets/javascripts/blob/components/blob_content_error.vue
+++ b/app/assets/javascripts/blob/components/blob_content_error.vue
@@ -61,7 +61,7 @@ export default {
 </script>
 <template>
   <div class="file-content code">
-    <div class="text-center py-4">
+    <div class="!gl-py-6 !gl-text-center">
       <gl-sprintf :message="$options.errorMessage">
         <template #reason>{{ renderErrorReason }}</template>
         <template #options>
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index cdba1fe8f14c1e..bf6c11b16ae5df 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -89,7 +89,7 @@ export default {
 </script>
 <template>
   <div class="js-file-title file-title-flex-parent">
-    <div class="gl-mb-3 gl-flex gl-gap-3 md:gl-mb-0">
+    <div class="gl-mb-3 gl-flex gl-gap-3 @md/panel:gl-mb-0">
       <blob-filepath
         :blob="blob"
         :show-path="showPath"
diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
index 22001447246b94..6f25c275848e32 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -103,7 +103,10 @@ export default {
 };
 </script>
 <template>
-  <gl-button-group class="gl-hidden sm:gl-inline-flex" data-testid="default-actions-container">
+  <gl-button-group
+    class="gl-hidden @sm/panel:gl-inline-flex"
+    data-testid="default-actions-container"
+  >
     <gl-button
       v-if="!isEmpty && showCopyButton"
       v-gl-tooltip.hover
diff --git a/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue b/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue
index bb05a1e3b78e95..26dc09e4a47896 100644
--- a/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue
+++ b/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue
@@ -43,7 +43,9 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mr-3 gl-flex gl-w-full gl-flex-col gl-gap-3 lg:gl-w-auto lg:gl-flex-row">
+  <div
+    class="gl-mr-3 gl-flex gl-w-full gl-flex-col gl-gap-3 @lg/panel:gl-w-auto @lg/panel:gl-flex-row"
+  >
     <gl-form-group
       class="gl-mb-0"
       :label="inputOptions.label"
diff --git a/app/assets/javascripts/blob/notebook/notebook_viewer.vue b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
index 144571ce0c3897..ead2dc48b861cf 100644
--- a/app/assets/javascripts/blob/notebook/notebook_viewer.vue
+++ b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
@@ -64,11 +64,11 @@ export default {
 
 <template>
   <div class="js-notebook-viewer-mounted container-fluid md gl-mb-3 gl-mt-3">
-    <div v-if="loading && !error" class="text-center loading">
-      <gl-loading-icon class="mt-5" size="lg" />
+    <div v-if="loading && !error" class="loading !gl-text-center">
+      <gl-loading-icon class="!gl-mt-7" size="lg" />
     </div>
     <notebook-lab v-if="!loading && !error" :notebook="json" />
-    <p v-if="error" class="text-center">
+    <p v-if="error" class="!gl-text-center">
       <span v-if="loadError" ref="loadErrorMessage">{{
         __('An error occurred while loading the file. Please try again later.')
       }}</span>
diff --git a/app/assets/javascripts/blob/pdf/pdf_viewer.vue b/app/assets/javascripts/blob/pdf/pdf_viewer.vue
index 53172f4a42104d..33a932344fe413 100644
--- a/app/assets/javascripts/blob/pdf/pdf_viewer.vue
+++ b/app/assets/javascripts/blob/pdf/pdf_viewer.vue
@@ -35,8 +35,8 @@ export default {
 
 <template>
   <div class="js-pdf-viewer container-fluid md gl-mb-3 gl-mt-3">
-    <div v-if="loading && !error" class="text-center loading">
-      <gl-loading-icon class="mt-5" size="lg" />
+    <div v-if="loading && !error" class="loading !gl-text-center">
+      <gl-loading-icon class="!gl-mt-7" size="lg" />
     </div>
     <pdf-lab
       v-if="!loadError"
@@ -45,7 +45,7 @@ export default {
       @pdflaberror="onError"
       v-on="$listeners"
     />
-    <p v-if="error" class="text-center">
+    <p v-if="error" class="!gl-text-center">
       <span v-if="loadError" ref="loadError">
         {{ __('An error occurred while loading the file. Please try again later.') }}
       </span>
diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index bb29224cda27eb..a81e1174fc9878 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -49,7 +49,7 @@ export default class SketchLoader {
   error() {
     const errorMsg = document.createElement('p');
 
-    errorMsg.className = 'gl-mt-3 gl-mb-3 text-center';
+    errorMsg.className = 'gl-mt-3 gl-mb-3 !gl-text-center';
     errorMsg.textContent = __(`
       Cannot show preview. For previews on sketch files, they must have the file format
       introduced by Sketch version 43 and above.
diff --git a/app/assets/javascripts/branches/components/divergence_graph.vue b/app/assets/javascripts/branches/components/divergence_graph.vue
index 3cde39b79a3443..02defa01e11e90 100644
--- a/app/assets/javascripts/branches/components/divergence_graph.vue
+++ b/app/assets/javascripts/branches/components/divergence_graph.vue
@@ -59,13 +59,13 @@ export default {
 </script>
 
 <template>
-  <div :title="title" class="divergence-graph px-2 gl-hidden md:gl-block">
+  <div :title="title" class="divergence-graph gl-hidden !gl-px-3 @md/panel:gl-block">
     <template v-if="distance">
       <graph-bar :count="distance" :max-commits="maxCommits" position="full" />
     </template>
     <template v-else>
       <graph-bar :count="behindCount" :max-commits="maxCommits" position="left" />
-      <div class="graph-separator float-left mt-1"></div>
+      <div class="graph-separator !gl-float-left !gl-mt-2"></div>
       <graph-bar :count="aheadCount" :max-commits="maxCommits" position="right" />
     </template>
   </div>
diff --git a/app/assets/javascripts/branches/components/graph_bar.vue b/app/assets/javascripts/branches/components/graph_bar.vue
index 8dd0ed2879ba8e..7080ef15595a3d 100644
--- a/app/assets/javascripts/branches/components/graph_bar.vue
+++ b/app/assets/javascripts/branches/components/graph_bar.vue
@@ -44,7 +44,7 @@ export default {
       return `rounded-${this.position}`;
     },
     textAlignmentClass() {
-      if (this.isFullWidth) return 'text-center';
+      if (this.isFullWidth) return '!gl-text-center';
 
       return `text-${this.isLeftSide ? SIDES.right : SIDES.left}`;
     },
diff --git a/app/assets/javascripts/ci/artifacts/components/artifact_row.vue b/app/assets/javascripts/ci/artifacts/components/artifact_row.vue
index 5a49b47ac86b31..3961167f66f45e 100644
--- a/app/assets/javascripts/ci/artifacts/components/artifact_row.vue
+++ b/app/assets/javascripts/ci/artifacts/components/artifact_row.vue
@@ -83,7 +83,7 @@ export default {
 <template>
   <div class="gl-py-4" :class="{ 'gl-border-b-1 gl-border-default gl-border-b-solid': !isLastRow }">
     <div class="gl-inline-flex gl-w-full gl-items-center">
-      <span v-if="canBulkDestroyArtifacts" class="gl-ml-5 md:gl-ml-9">
+      <span v-if="canBulkDestroyArtifacts" class="gl-ml-5 @md/panel:gl-ml-9">
         <gl-form-checkbox
           v-gl-tooltip.right
           :title="checkboxTooltip"
@@ -95,7 +95,7 @@ export default {
       </span>
       <span
         class="gl-flex gl-items-center gl-pl-5"
-        :class="canBulkDestroyArtifacts ? '' : 'md:gl-pl-8'"
+        :class="canBulkDestroyArtifacts ? '' : '@md/panel:gl-pl-8'"
         data-testid="job-artifact-row-name"
       >
         <gl-friendly-wrap :text="artifact.name" />
@@ -108,13 +108,13 @@ export default {
       </span>
 
       <span
-        class="gl-ml-5 gl-shrink-0 gl-pr-5 gl-text-right md:gl-ml-0 md:gl-grow"
+        class="gl-ml-5 gl-shrink-0 gl-pr-5 gl-text-right @md/panel:gl-ml-0 @md/panel:gl-grow"
         data-testid="job-artifact-row-size"
       >
         {{ artifactSize }}
       </span>
 
-      <span class="!gl-w-3/8 gl-shrink-0 gl-grow gl-px-5 gl-text-right md:gl-grow-0">
+      <span class="!gl-w-3/8 gl-shrink-0 gl-grow gl-px-5 gl-text-right @md/panel:gl-grow-0">
         <gl-button-group>
           <gl-button
             category="tertiary"
diff --git a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
index a834c9f4c06e7e..ba323eed0a5442 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -160,7 +160,7 @@ export default {
           {
             key: 'checkbox',
             label: I18N_CHECKBOX,
-            thClass: 'md:gl-w-0 md:gl-min-w-6 md:!gl-pr-0',
+            thClass: '@md/panel:gl-w-0 @md/panel:gl-min-w-6 md:!gl-pr-0',
             tdClass: 'md:!gl-pr-0',
           },
           ...this.$options.fields,
diff --git a/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue b/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue
index 45a429232b3f71..b10e1d2b4702d2 100644
--- a/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue
+++ b/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue
@@ -45,7 +45,7 @@ export default {
 </script>
 
 <template>
-  <div class="align-items-lg-center gl-flex">
+  <div class="gl-flex @lg/panel:!gl-items-center">
     <gl-tabs content-class="gl-py-0" class="gl-w-full">
       <gl-tab
         v-for="tab in tabs"
diff --git a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
index 83b2b3a37cf679..8152f832b3b1ea 100644
--- a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
+++ b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
@@ -204,7 +204,7 @@ export default {
           <b> {{ resource.name }}</b>
         </gl-link>
         <project-visibility-icon v-if="isPrivate" />
-        <div class="gl-flex gl-grow md:gl-justify-between">
+        <div class="gl-flex gl-grow @md/panel:gl-justify-between">
           <div class="gl-flex gl-items-center">
             <gl-badge
               v-gl-tooltip.top
@@ -246,11 +246,11 @@ export default {
           </div>
         </div>
       </div>
-      <div class="gl-flex gl-flex-col gl-justify-between gl-gap-2 gl-text-sm md:gl-flex-row">
+      <div class="gl-flex gl-flex-col gl-justify-between gl-gap-2 gl-text-sm @md/panel:gl-flex-row">
         <div class="gl-flex gl-basis-2/3 gl-flex-col">
           <markdown
             v-if="resource.description"
-            class="gl-hidden md:gl-block"
+            class="gl-hidden @md/panel:gl-block"
             :markdown="truncatedDescription"
           />
           <div
diff --git a/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue b/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue
index 5985cdf77289c5..b7fabead238c9f 100644
--- a/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue
+++ b/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue
@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div class="row">
-    <div class="col-sm-12">
+    <div class="gl-col-sm-12">
       <gl-alert
         v-if="shouldShowError"
         class="gl-mb-3"
@@ -98,14 +98,14 @@ export default {
         >{{ apiError }}</gl-alert
       >
       <div class="file-holder gl-mb-3">
-        <div class="js-file-title file-title clearfix">
+        <div class="js-file-title file-title gl-clearfix">
           {{ __('Contents of .gitlab-ci.yml') }}
         </div>
         <source-editor v-model="content" file-name="*.yml" />
       </div>
     </div>
 
-    <div class="col-sm-12 gl-flex gl-justify-between">
+    <div class="gl-col-sm-12 gl-flex gl-justify-between">
       <div class="gl-flex gl-items-center">
         <gl-button
           class="gl-mr-4"
@@ -126,7 +126,7 @@ export default {
 
     <ci-lint-results
       v-if="showingResults"
-      class="col-sm-12 gl-mt-5"
+      class="gl-col-sm-12 gl-mt-5"
       :is-valid="isValid"
       :jobs="jobs"
       :errors="errors"
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
index 22d1b1135b44c9..c3a451e7c6d1d5 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
@@ -99,7 +99,7 @@ export default {
 
 <template>
   <div class="row">
-    <div class="col-lg-12">
+    <div class="gl-col-lg-12">
       <ci-variable-table
         :entity="entity"
         :is-loading="isLoading"
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
index fce30510694a10..2a7bc08d8ebb39 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
@@ -272,7 +272,7 @@ export default {
         </template>
         <template #cell(key)="{ item }">
           <div data-testid="ci-variable-table-row-variable">
-            <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end md:gl-justify-start">
+            <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end @md/panel:gl-justify-start">
               <span
                 :id="`ci-variable-key-${item.id}`"
                 class="gl-inline-block gl-max-w-full gl-break-anywhere"
@@ -304,7 +304,7 @@ export default {
         <template v-if="!isInheritedGroupVars" #cell(value)="{ item }">
           <div
             v-if="!item.hidden"
-            class="-gl-mr-3 gl-flex gl-items-start gl-justify-end md:gl-justify-start"
+            class="-gl-mr-3 gl-flex gl-items-start gl-justify-end @md/panel:gl-justify-start"
           >
             <span v-if="areValuesHidden" data-testid="hiddenValue">•••••</span>
             <span
@@ -324,7 +324,7 @@ export default {
           </div>
         </template>
         <template #cell(environmentScope)="{ item }">
-          <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end md:gl-justify-start">
+          <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end @md/panel:gl-justify-start">
             <span
               :id="`ci-variable-env-${item.id}`"
               class="gl-inline-block gl-max-w-full gl-break-anywhere"
@@ -340,7 +340,7 @@ export default {
           </div>
         </template>
         <template v-if="isInheritedGroupVars" #cell(group)="{ item }">
-          <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end md:gl-justify-start">
+          <div class="-gl-mr-3 gl-flex gl-items-start gl-justify-end @md/panel:gl-justify-start">
             <gl-link
               v-if="item.groupCiCdSettingsPath"
               :id="`ci-variable-group-${item.id}`"
diff --git a/app/assets/javascripts/ci/common/pipeline_inputs/pipeline_inputs_table/pipeline_inputs_table.vue b/app/assets/javascripts/ci/common/pipeline_inputs/pipeline_inputs_table/pipeline_inputs_table.vue
index 9c2569a11b7c27..06685f2f0ea593 100644
--- a/app/assets/javascripts/ci/common/pipeline_inputs/pipeline_inputs_table/pipeline_inputs_table.vue
+++ b/app/assets/javascripts/ci/common/pipeline_inputs/pipeline_inputs_table/pipeline_inputs_table.vue
@@ -35,7 +35,7 @@ export default {
     {
       key: 'value',
       label: __('Value'),
-      tdClass: 'md:gl-max-w-26',
+      tdClass: '@md/panel:gl-max-w-26',
     },
   ],
   props: {
@@ -67,7 +67,7 @@ export default {
 
 <template>
   <!-- Will replace with pagination in the future. -->
-  <div class="gl-overflow-y-auto md:gl-max-h-[50rem]">
+  <div class="gl-overflow-y-auto @md/panel:gl-max-h-[50rem]">
     <gl-table-lite
       class="gl-mb-0"
       :items="filteredItems"
diff --git a/app/assets/javascripts/ci/common/private/job_links_layer.vue b/app/assets/javascripts/ci/common/private/job_links_layer.vue
index dad3e265b009d4..86ea7c00301527 100644
--- a/app/assets/javascripts/ci/common/private/job_links_layer.vue
+++ b/app/assets/javascripts/ci/common/private/job_links_layer.vue
@@ -64,7 +64,7 @@ export default {
     <slot></slot>
   </links-inner>
   <div v-else>
-    <div class="gl-relative gl-flex gl-flex-wrap sm:gl-flex-nowrap">
+    <div class="gl-relative gl-flex gl-flex-wrap @sm/panel:gl-flex-nowrap">
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue
index 481fc2a778dfb4..48757381037f09 100644
--- a/app/assets/javascripts/ci/job_details/components/job_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_header.vue
@@ -166,7 +166,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loading" class="my-5" size="lg" />
+  <gl-loading-icon v-if="loading" class="!gl-my-7" size="lg" />
   <div v-else>
     <page-heading v-if="job" data-testid="job-header-content">
       <template #heading>
@@ -177,7 +177,7 @@ export default {
         <gl-button
           :aria-label="__('Toggle sidebar')"
           category="secondary"
-          class="gl-ml-2 lg:gl-hidden"
+          class="gl-ml-2 @lg/panel:gl-hidden"
           icon="chevron-double-lg-left"
           @click="onClickSidebarButton"
         />
@@ -205,9 +205,9 @@ export default {
               :size="24"
               :src="avatarUrl"
               :label="user.name"
-              class="gl-hidden sm:gl-inline-flex"
+              class="gl-hidden @sm/panel:gl-inline-flex"
             />
-            <strong class="author gl-inline sm:gl-hidden">@{{ user.username }}</strong>
+            <strong class="author gl-inline @sm/panel:gl-hidden">@{{ user.username }}</strong>
             <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]">
               {{ message }}
             </gl-tooltip>
diff --git a/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue b/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
index 66d8120612f5aa..85ef58036e247e 100644
--- a/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_log_top_bar.vue
@@ -194,7 +194,7 @@ export default {
 </script>
 <template>
   <div class="top-bar gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3">
-    <div class="gl-hidden gl-truncate sm:gl-block">
+    <div class="gl-hidden gl-truncate @sm/panel:gl-block">
       <!-- truncated log information -->
       <span data-testid="showing-last">
         <template v-if="isJobLogSizeVisible">
diff --git a/app/assets/javascripts/ci/job_details/components/log/log.vue b/app/assets/javascripts/ci/job_details/components/log/log.vue
index ee3afb2d110634..0a5b071d9395c0 100644
--- a/app/assets/javascripts/ci/job_details/components/log/log.vue
+++ b/app/assets/javascripts/ci/job_details/components/log/log.vue
@@ -101,7 +101,7 @@ export default {
       </template>
     </template>
 
-    <div v-if="!isJobLogComplete" class="js-log-animation loader-animation pt-3 pl-3">
+    <div v-if="!isJobLogComplete" class="js-log-animation loader-animation !gl-pl-5 !gl-pt-5">
       <div class="dot"></div>
       <div class="dot"></div>
       <div class="dot"></div>
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/external_links_block.vue b/app/assets/javascripts/ci/job_details/components/sidebar/external_links_block.vue
index eeeb7c16ba3f7f..4b30addee98b0c 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/external_links_block.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/external_links_block.vue
@@ -20,7 +20,7 @@ export default {
     <ul class="gl-m-0 gl-list-none gl-p-0">
       <li v-for="(externalLink, index) in externalLinks" :key="index">
         <gl-link :href="externalLink.url" target="_blank" rel="noopener noreferrer nofollow">
-          <gl-icon name="external-link" class="flex-shrink-0" />
+          <gl-icon name="external-link" class="!gl-shrink-0" />
           {{ externalLink.label }}
         </gl-link>
       </li>
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
index cd60d984009025..875da6398493fe 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
@@ -108,7 +108,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mr-2 gl-py-5 lg:gl-mb-4 lg:gl-mr-4 lg:gl-py-6">
+  <div class="gl-mr-2 gl-py-5 @lg/panel:gl-mb-4 @lg/panel:gl-mr-4 @lg/panel:gl-py-6">
     <div class="gl-flex gl-justify-end gl-gap-3">
       <div class="gl-flex gl-gap-3">
         <template v-if="jobHasPath">
@@ -191,7 +191,7 @@ export default {
       <gl-button
         :aria-label="$options.i18n.toggleSidebar"
         category="secondary"
-        class="lg:gl-hidden"
+        class="@lg/panel:gl-hidden"
         icon="chevron-double-lg-right"
         @click="toggleSidebar"
       />
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
index b257030f1c3789..a44475488cc4d0 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
@@ -189,7 +189,7 @@ export default {
     />
 
     <p v-if="hasTags" class="build-detail-row" data-testid="job-tags">
-      <span class="font-weight-bold">{{ $options.i18n.TAGS }}:</span>
+      <span class="!gl-font-bold">{{ $options.i18n.TAGS }}:</span>
       <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info">{{ tag }}</gl-badge>
     </p>
   </div>
diff --git a/app/assets/javascripts/ci/job_details/job_app.vue b/app/assets/javascripts/ci/job_details/job_app.vue
index 86896d68bde032..10e754b404087e 100644
--- a/app/assets/javascripts/ci/job_details/job_app.vue
+++ b/app/assets/javascripts/ci/job_details/job_app.vue
@@ -319,7 +319,7 @@ export default {
           <nav
             v-if="displayStickyFooter"
             :class="[
-              'rca-bar-component gl-fixed gl-px-5 gl-py-2 xl:gl-px-6',
+              'rca-bar-component gl-fixed gl-px-5 gl-py-2 @xl/panel:gl-px-6',
               { 'rca-bar-component-fullscreen': fullScreenEnabled },
             ]"
             data-testid="rca-bar-component"
diff --git a/app/assets/javascripts/ci/jobs_page/components/job_cells/job_cell.vue b/app/assets/javascripts/ci/jobs_page/components/job_cells/job_cell.vue
index af7b011ba06eed..1cce96dc964064 100644
--- a/app/assets/javascripts/ci/jobs_page/components/job_cells/job_cell.vue
+++ b/app/assets/javascripts/ci/jobs_page/components/job_cells/job_cell.vue
@@ -97,7 +97,9 @@ export default {
       <span v-else data-testid="job-id-limited-access">{{ jobId }}: {{ job.name }}</span>
     </div>
 
-    <div class="gl-mt-1 gl-flex gl-items-center gl-justify-end gl-text-subtle lg:gl-justify-start">
+    <div
+      class="gl-mt-1 gl-flex gl-items-center gl-justify-end gl-text-subtle @lg/panel:gl-justify-start"
+    >
       <div v-if="jobRef" class="gl-max-w-26 gl-truncate gl-rounded-base gl-bg-strong gl-px-2">
         <gl-icon
           v-if="createdByTag"
diff --git a/app/assets/javascripts/ci/jobs_page/components/jobs_table_tabs.vue b/app/assets/javascripts/ci/jobs_page/components/jobs_table_tabs.vue
index 0c7bdbb2f2ee06..a4b21afd4f967e 100644
--- a/app/assets/javascripts/ci/jobs_page/components/jobs_table_tabs.vue
+++ b/app/assets/javascripts/ci/jobs_page/components/jobs_table_tabs.vue
@@ -68,7 +68,7 @@ export default {
 </script>
 
 <template>
-  <div class="align-items-lg-center gl-flex">
+  <div class="gl-flex @lg/panel:!gl-items-center">
     <gl-tabs content-class="gl-py-0" class="gl-w-full">
       <gl-tab
         v-for="tab in tabs"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
index b48536c5154481..3c18bd99d8400e 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
@@ -178,7 +178,7 @@ export default {
       :class="{
         'pipeline-graph-container gl-pipeline-min-h gl-mt-3 gl-items-start gl-overflow-auto gl-bg-subtle gl-pb-8 gl-pt-3':
           !isLinkedPipeline,
-        'gl-bg-strong sm:gl-ml-5': isLinkedPipeline,
+        'gl-bg-strong @sm/panel:gl-ml-5': isLinkedPipeline,
       }"
       data-testid="pipeline-container"
     >
@@ -237,7 +237,7 @@ export default {
         <template #downstream>
           <linked-pipelines-column
             v-if="showDownstreamPipelines"
-            class="sm:gl-ml-3"
+            class="@sm/panel:gl-ml-3"
             :config-paths="configPaths"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
index 11f06496dcf096..3776e51a0a0023 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
@@ -136,7 +136,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-relative gl-my-4 gl-flex gl-flex-wrap gl-items-center sm:gl-flex-nowrap">
+    <div class="gl-relative gl-my-4 gl-flex gl-flex-wrap gl-items-center @sm/panel:gl-flex-nowrap">
       <gl-loading-icon
         v-if="isSwitcherLoading"
         data-testid="switcher-loading-state"
@@ -159,7 +159,7 @@ export default {
         <gl-toggle
           v-model="showLinksActive"
           data-testid="show-links-toggle"
-          class="gl-sm-ml-4 gl-mt-4 sm:gl-mt-0"
+          class="gl-sm-ml-4 gl-mt-4 @sm/panel:gl-mt-0"
           :label="$options.i18n.linksLabelText"
           :is-loading="isToggleLoading"
           label-position="left"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
index 228f9dc0304912..94f2857b074f0b 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="gl-flex gl-w-full gl-flex-wrap sm:gl-flex-nowrap">
+  <div class="gl-flex gl-w-full gl-flex-wrap @sm/panel:gl-flex-nowrap">
     <slot name="upstream"></slot>
     <slot name="main"></slot>
     <slot name="downstream"></slot>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index ca5752f8f7bc2e..60643b1e84839e 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -262,7 +262,7 @@ export default {
 <template>
   <div
     ref="linkedPipeline"
-    class="linked-pipeline-container !gl-flex gl-h-full gl-w-full sm:gl-w-auto"
+    class="linked-pipeline-container !gl-flex gl-h-full gl-w-full @sm/panel:gl-w-auto"
     :class="{
       'gl-flex-row-reverse': isUpstream,
       'gl-flex-row': !isUpstream,
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
index 0e87ae19e8fc46..9088c83dbb2696 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
@@ -190,7 +190,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-flex gl-w-full sm:gl-w-auto">
+  <div class="gl-flex gl-w-full @sm/panel:gl-w-auto">
     <div :class="columnClass" class="linked-pipelines-column">
       <div data-testid="linked-column-title" :class="computedTitleClasses">
         {{ columnTitle }}
@@ -199,7 +199,7 @@ export default {
         <li
           v-for="pipeline in linkedPipelines"
           :key="pipeline.id"
-          class="gl-mb-6 gl-flex gl-flex-wrap sm:gl-flex-nowrap"
+          class="gl-mb-6 gl-flex gl-flex-wrap @sm/panel:gl-flex-nowrap"
         >
           <linked-pipeline
             class="gl-inline-block"
diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
index 0a5db023d85e60..89b422858a7e6a 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
@@ -339,7 +339,7 @@ export default {
 
     <gl-loading-icon v-if="loading" class="gl-mt-5 gl-text-center" size="md" />
 
-    <page-heading v-else inline-actions class="gl-mb-0 gl-gap-y-5 sm:gl-gap-y-3">
+    <page-heading v-else inline-actions class="gl-mb-0 gl-gap-y-5 @sm/panel:gl-gap-y-3">
       <template #heading>
         <span v-if="pipelineName" data-testid="pipeline-name">
           {{ pipelineName }}
@@ -399,7 +399,11 @@ export default {
           </template>
         </div>
 
-        <div v-safe-html="refText" class="gl-my-3 sm:gl-mt-0" data-testid="pipeline-ref-text"></div>
+        <div
+          v-safe-html="refText"
+          class="gl-my-3 @sm/panel:gl-mt-0"
+          data-testid="pipeline-ref-text"
+        ></div>
         <div>
           <header-badges :pipeline="pipeline" />
 
diff --git a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
index 0b970c5267d73f..d17f8047b43524 100644
--- a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
@@ -80,7 +80,7 @@ export default {
     </template>
 
     <template #cell(name)="{ item }">
-      <div class="gl-flex gl-items-center gl-justify-end lg:gl-justify-start">
+      <div class="gl-flex gl-items-center gl-justify-end @lg/panel:gl-justify-start">
         <ci-icon :status="item.detailedStatus" class="gl-mr-3" />
         <div class="gl-truncate">
           <gl-link :href="item.detailedStatus.detailsPath" class="gl-font-bold !gl-text-default">
diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
index c04efc7d7e11ec..657fd77d932fd0 100644
--- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
@@ -77,7 +77,7 @@ export default {
   <div>
     <div v-if="hasSuites" class="test-reports-table js-test-cases-table gl-mb-3">
       <div class="row gl-mt-3">
-        <div class="col-12">
+        <div class="gl-col-12">
           <h4>{{ heading }}</h4>
         </div>
       </div>
@@ -94,7 +94,7 @@ export default {
         <div role="rowheader" class="table-section section-10">
           {{ __('Filename') }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 !gl-text-center">
           {{ __('Status') }}
         </div>
         <div role="rowheader" class="table-section section-10">
@@ -113,21 +113,21 @@ export default {
       >
         <div class="table-section section-20 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
-          <div class="table-mobile-content gl-break-words gl-pr-0 sm:gl-pr-2">
+          <div class="table-mobile-content gl-break-words gl-pr-0 @sm/panel:gl-pr-2">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
           </div>
         </div>
 
         <div class="table-section section-40 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
-          <div class="table-mobile-content gl-break-words gl-pr-0 sm:gl-pr-2">
+          <div class="table-mobile-content gl-break-words gl-pr-0 @sm/panel:gl-pr-2">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" />
           </div>
         </div>
 
         <div class="table-section section-10 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Filename') }}</div>
-          <div class="table-mobile-content gl-break-words gl-pr-0 sm:gl-pr-2">
+          <div class="table-mobile-content gl-break-words gl-pr-0 @sm/panel:gl-pr-2">
             <gl-link v-if="testCase.file" :href="testCase.filePath" target="_blank">
               <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" />
             </gl-link>
@@ -146,7 +146,7 @@ export default {
 
         <div class="table-section section-10 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
-          <div class="table-mobile-content gl-justify-center md:gl-flex">
+          <div class="table-mobile-content gl-justify-center @md/panel:gl-flex">
             <div class="ci-status-icon" :class="`ci-status-icon-${testCase.status}`">
               <gl-icon :size="24" :name="testCase.icon" />
             </div>
@@ -157,7 +157,7 @@ export default {
           <div role="rowheader" class="table-mobile-header">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content gl-pr-0 sm:gl-pr-2">
+          <div class="table-mobile-content gl-pr-0 @sm/panel:gl-pr-2">
             {{ testCase.formattedTime }}
           </div>
         </div>
diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
index d758e46d23e3c1..fec8824e48652c 100644
--- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
+++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary.vue
@@ -78,7 +78,7 @@ export default {
       <h4>{{ heading }}</h4>
     </div>
 
-    <div class="gl-mt-3 gl-flex gl-w-full gl-flex-col md:gl-flex-row">
+    <div class="gl-mt-3 gl-flex gl-w-full gl-flex-col @md/panel:gl-flex-row">
       <div class="gl-flex gl-basis-1/2 gl-justify-between">
         <span class="js-total-tests gl-grow">{{
           sprintf(s__('TestReports|%{count} tests'), { count: report.total_count })
@@ -93,7 +93,7 @@ export default {
         }}</span>
       </div>
       <div class="gl-flex gl-grow gl-justify-between">
-        <div class="gl-hidden gl-grow md:gl-block"></div>
+        <div class="gl-hidden gl-grow @md/panel:gl-block"></div>
         <span class="js-success-rate gl-grow">{{
           sprintf(s__('TestReports|%{rate}%{sign} success rate'), {
             rate: successPercentage,
diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue
index 1dc436d698db37..e18867f5d5e0f1 100644
--- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_summary_table.vue
@@ -128,7 +128,7 @@ export default {
           <div class="table-mobile-content">{{ testSuite.success_count }}</div>
         </div>
 
-        <div class="table-section section-10 pr-md-3 gl-text-right">
+        <div class="table-section section-10 gl-text-right @md/panel:!gl-pr-5">
           <div role="rowheader" class="table-mobile-header gl-font-bold">
             {{ __('Total') }}
           </div>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
index 39b8af4886ebb7..acd6777f374f23 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div
-    class="gl-flex gl-flex-col gl-gap-3 gl-border-1 gl-border-solid gl-border-default gl-p-3 md:gl-flex-row md:gl-items-center"
+    class="gl-flex gl-flex-col gl-gap-3 gl-border-1 gl-border-solid gl-border-default gl-p-3 @md/panel:gl-flex-row @md/panel:gl-items-center"
   >
     <slot></slot>
     <gl-button
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/validate/ci_validate.vue b/app/assets/javascripts/ci/pipeline_editor/components/validate/ci_validate.vue
index 913ec6b75a0535..9b3c7378eefd5a 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/validate/ci_validate.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/validate/ci_validate.vue
@@ -233,7 +233,7 @@ export default {
       </div>
       <gl-button
         v-if="ciLintPath"
-        class="md:gl-ml-auto"
+        class="@md/panel:gl-ml-auto"
         :href="ciLintPath"
         data-testid="lint-button"
       >
diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
index 642fb3533d90bb..35ea9c2cbbec49 100644
--- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
@@ -159,7 +159,7 @@ export default {
       @toggle-file-tree="toggleFileTree"
       v-on="$listeners"
     />
-    <div class="gl-flex gl-w-full gl-flex-col md:gl-flex-row">
+    <div class="gl-flex gl-w-full gl-flex-col @md/panel:gl-flex-row">
       <pipeline-editor-file-tree
         v-if="showFileTree"
         class="gl-shrink-0"
diff --git a/app/assets/javascripts/ci/pipeline_new/components/pipeline_variables_form.vue b/app/assets/javascripts/ci/pipeline_new/components/pipeline_variables_form.vue
index a773a61f3b9e59..12f3c24ea270a1 100644
--- a/app/assets/javascripts/ci/pipeline_new/components/pipeline_variables_form.vue
+++ b/app/assets/javascripts/ci/pipeline_new/components/pipeline_variables_form.vue
@@ -299,7 +299,7 @@ export default {
           class="gl-mb-4"
           data-testid="ci-variable-row-container"
         >
-          <div class="gl-flex gl-flex-col gl-items-stretch gl-gap-4 md:gl-flex-row">
+          <div class="gl-flex gl-flex-col gl-items-stretch gl-gap-4 @md/panel:gl-flex-row">
             <gl-collapsible-listbox
               :items="variableTypeListboxItems"
               :selected="variable.variableType"
@@ -345,11 +345,11 @@ export default {
                 @click="removeVariable(index)"
               >
                 <gl-icon class="!gl-mr-0" name="remove" />
-                <span class="md:gl-hidden">{{ s__('CiVariables|Remove variable') }}</span>
+                <span class="@md/panel:gl-hidden">{{ s__('CiVariables|Remove variable') }}</span>
               </gl-button>
               <gl-button
                 v-else
-                class="gl-invisible gl-hidden gl-shrink-0 md:gl-block"
+                class="gl-invisible gl-hidden gl-shrink-0 @md/panel:gl-block"
                 icon="remove"
                 :aria-label="s__('CiVariables|Remove variable')"
               />
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
index b8cc354bc1a1d5..b8beba01915f01 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
@@ -304,7 +304,7 @@ export default {
     <gl-form-group
       :label="$options.i18n.description"
       label-for="schedule-description"
-      class="lg:gl-w-2/3"
+      class="@lg/panel:gl-w-2/3"
     >
       <gl-form-input
         id="schedule-description"
@@ -319,7 +319,7 @@ export default {
     <gl-form-group
       :label="$options.i18n.cronTimezoneText"
       label-for="user_timezone"
-      class="lg:gl-w-2/3"
+      class="@lg/panel:gl-w-2/3"
     >
       <timezone-dropdown
         id="schedule-timezone"
@@ -335,7 +335,7 @@ export default {
     <gl-form-group
       :label="$options.i18n.intervalPattern"
       label-for="schedule-interval"
-      class="lg:gl-w-2/3"
+      class="@lg/panel:gl-w-2/3"
     >
       <interval-pattern-input
         id="schedule-interval"
@@ -349,7 +349,7 @@ export default {
     <gl-form-group
       :label="$options.i18n.targetBranchTag"
       label-for="schedule-target-branch-tag"
-      class="lg:gl-w-2/3"
+      class="@lg/panel:gl-w-2/3"
     >
       <ref-selector
         id="schedule-target-branch-tag"
@@ -390,14 +390,14 @@ export default {
         type="submit"
         variant="confirm"
         data-testid="schedule-submit-button"
-        class="gl-w-full sm:gl-w-auto"
+        class="gl-w-full @sm/panel:gl-w-auto"
       >
         {{ buttonText }}
       </gl-button>
       <gl-button
         :href="schedulesPath"
         data-testid="schedule-cancel-button"
-        class="gl-w-full sm:gl-w-auto"
+        class="gl-w-full @sm/panel:gl-w-auto"
       >
         {{ $options.i18n.cancel }}
       </gl-button>
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_variables_form_group.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_variables_form_group.vue
index 2a4bbb8485926e..b9755295dbdb42 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_variables_form_group.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_variables_form_group.vue
@@ -139,7 +139,7 @@ export default {
       <div v-for="(variable, index) in variables" :key="`var-${index}`" class="gl-mb-4">
         <div
           v-if="!variable.destroy"
-          class="gl-flex gl-flex-col gl-items-stretch gl-gap-4 md:gl-flex-row"
+          class="gl-flex gl-flex-col gl-items-stretch gl-gap-4 @md/panel:gl-flex-row"
           data-testid="ci-variable-row"
         >
           <gl-collapsible-listbox
@@ -193,11 +193,11 @@ export default {
               @click="removeVariable(index)"
             >
               <gl-icon class="!gl-mr-0" name="remove" />
-              <span class="md:gl-hidden">{{ s__('CiVariables|Remove variable') }}</span>
+              <span class="@md/panel:gl-hidden">{{ s__('CiVariables|Remove variable') }}</span>
             </gl-button>
             <gl-button
               v-else
-              class="gl-invisible gl-hidden md:gl-block"
+              class="gl-invisible gl-hidden @md/panel:gl-block"
               icon="clear"
               :aria-label="s__('CiVariables|Remove variable')"
             />
diff --git a/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_cards.vue b/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_cards.vue
index 553e07049709d5..2dfa9c27af5cd4 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_cards.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_cards.vue
@@ -103,7 +103,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-grid gl-gap-5 md:gl-grid-cols-2 lg:gl-grid-cols-4">
+  <div class="gl-grid gl-gap-5 @md/panel:gl-grid-cols-2 @lg/panel:gl-grid-cols-4">
     <template v-for="card in cards">
       <gl-card
         v-if="card.isVisible"
diff --git a/app/assets/javascripts/ci/pipelines_page/components/nav_controls.vue b/app/assets/javascripts/ci/pipelines_page/components/nav_controls.vue
index b49537ac5c494b..c8cff0bf8363b4 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/nav_controls.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/nav_controls.vue
@@ -36,7 +36,7 @@ export default {
   <div class="nav-controls">
     <gl-link
       v-if="pipelinesAnalyticsPath"
-      class="gl-mb-3 gl-block gl-whitespace-nowrap gl-text-center md:gl-mb-0 md:gl-mr-3"
+      class="gl-mb-3 gl-block gl-whitespace-nowrap gl-text-center @md/panel:gl-mb-0 @md/panel:gl-mr-3"
       :href="pipelinesAnalyticsPath"
       data-testid="view-analytics-link"
     >
diff --git a/app/assets/javascripts/ci/pipelines_page/pipelines.vue b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
index 174583226bff83..656160a835dabc 100644
--- a/app/assets/javascripts/ci/pipelines_page/pipelines.vue
+++ b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
@@ -364,7 +364,7 @@ export default {
 
     <div v-if="stateToRender !== $options.stateMap.emptyState" class="gl-flex">
       <div
-        class="row-content-block gl-flex gl-max-w-full gl-flex-grow gl-flex-wrap gl-gap-4 gl-border-b-0 sm:gl-flex-nowrap"
+        class="row-content-block gl-flex gl-max-w-full gl-flex-grow gl-flex-wrap gl-gap-4 gl-border-b-0 @sm/panel:gl-flex-nowrap"
       >
         <pipelines-filtered-search
           class="gl-flex gl-max-w-full gl-flex-grow"
@@ -373,7 +373,7 @@ export default {
         />
         <gl-collapsible-listbox
           v-model="visibilityPipelineIdType"
-          class="gl-grow sm:gl-grow-0"
+          class="gl-grow @sm/panel:gl-grow-0"
           toggle-class="gl-grow"
           :toggle-text="selectedPipelineKeyOption.text"
           :items="$options.pipelineKeyOptions"
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
index ec16204c24964a..cec86fe2a1b076 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
@@ -85,7 +85,7 @@ export default {
     </div>
     <div
       v-if="runner.version || runner.description"
-      class="gl-mb-2 gl-inline-flex gl-text-subtle md:gl-mb-0"
+      class="gl-mb-2 gl-inline-flex gl-text-subtle @md/panel:gl-mb-0"
     >
       <template v-if="firstVersion">
         <div class="gl-shrink-0">
diff --git a/app/assets/javascripts/ci/runner/components/registration/gke_node_pool_group.vue b/app/assets/javascripts/ci/runner/components/registration/gke_node_pool_group.vue
index 1bf2ef7ccd217a..030dea465eb985 100644
--- a/app/assets/javascripts/ci/runner/components/registration/gke_node_pool_group.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/gke_node_pool_group.vue
@@ -267,7 +267,7 @@ export default {
       class="gl-mb-3 gl-pb-2"
       data-testid="node-pool-label-row-container"
     >
-      <div class="gl-flex gl-flex-col gl-items-stretch md:gl-flex-row">
+      <div class="gl-flex gl-flex-col gl-items-stretch @md/panel:gl-flex-row">
         <gl-form-input
           v-model="nodePoolLabel.key"
           :class="$options.formElementClasses"
@@ -285,18 +285,20 @@ export default {
         <template v-if="nodePoolLabels.length > 1">
           <gl-button
             v-if="canRemove(index)"
-            class="gl-mb-3 md:gl-ml-3"
+            class="gl-mb-3 @md/panel:gl-ml-3"
             data-testid="remove-node-pool-label"
             :category="removeButtonCategory"
             :aria-label="s__('Runners|Remove Node pool label')"
             @click="removeVariable(index)"
           >
             <gl-icon class="!gl-mr-0" name="remove" />
-            <span class="gl-ml-2 md:gl-hidden">{{ s__('Runners|Remove Node pool label') }}</span>
+            <span class="gl-ml-2 @md/panel:gl-hidden">{{
+              s__('Runners|Remove Node pool label')
+            }}</span>
           </gl-button>
           <gl-button
             v-else
-            class="gl-invisible gl-mb-3 gl-hidden md:gl-ml-3 md:gl-block"
+            class="gl-invisible gl-mb-3 gl-hidden @md/panel:gl-ml-3 @md/panel:gl-block"
             icon="remove"
             :aria-label="s__('Runners|Remove Node pool label')"
           />
diff --git a/app/assets/javascripts/ci/runner/components/registration/runner_instructions/instructions/runner_cli_instructions.vue b/app/assets/javascripts/ci/runner/components/registration/runner_instructions/instructions/runner_cli_instructions.vue
index ef3b1675136ffb..37e780a6c948a4 100644
--- a/app/assets/javascripts/ci/runner/components/registration/runner_instructions/instructions/runner_cli_instructions.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/runner_instructions/instructions/runner_cli_instructions.vue
@@ -109,7 +109,7 @@ export default {
     </h5>
 
     <gl-collapsible-listbox v-model="selectedArchName" class="gl-mb-3" :items="listboxItems" />
-    <div class="gl-mb-3 gl-items-center sm:gl-flex">
+    <div class="gl-mb-3 gl-items-center @sm/panel:gl-flex">
       <h5>{{ $options.i18n.downloadInstallBinary }}</h5>
       <gl-button
         v-if="binaryUrl"
diff --git a/app/assets/javascripts/ci/runner/components/runner_list.vue b/app/assets/javascripts/ci/runner/components/runner_list.vue
index 1b489930756ec0..387d333f48a61e 100644
--- a/app/assets/javascripts/ci/runner/components/runner_list.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_list.vue
@@ -20,9 +20,9 @@ const defaultFields = [
     key: 'actions',
     label: __('Actions'),
     thClasses: [
-      'md:gl-invisible', // hides the "Actions" header in large viewports
+      '@md/panel:gl-invisible', // hides the "Actions" header in large viewports
       'gl-w-4/20',
-      'lg:gl-w-3/20',
+      '@lg/panel:gl-w-3/20',
     ],
     tdClass: 'gl-text-right',
   }),
diff --git a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
index d88e3b7e9d5397..2f67623b10a69a 100644
--- a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
@@ -234,14 +234,20 @@ export default {
       :runner-types="$options.TABS_RUNNER_TYPES"
     />
 
-    <div class="gl-flex gl-flex-col gl-gap-3 md:gl-flex-row" :class="$options.FILTER_CSS_CLASSES">
+    <div
+      class="gl-flex gl-flex-col gl-gap-3 @md/panel:gl-flex-row"
+      :class="$options.FILTER_CSS_CLASSES"
+    >
       <runner-filtered-search-bar
         v-model="search"
         :tokens="searchTokens"
         :namespace="filteredSearchNamespace"
         class="gl-flex-grow gl-self-stretch"
       />
-      <runner-membership-toggle v-model="search.membership" class="gl-self-end md:gl-self-center" />
+      <runner-membership-toggle
+        v-model="search.membership"
+        class="gl-self-end @md/panel:gl-self-center"
+      />
     </div>
 
     <runner-stats :scope="$options.GROUP_TYPE" :variables="countVariables" />
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue
index 4265df48fcc50c..d29f47b5afa8d9 100644
--- a/app/assets/javascripts/clusters/forms/components/integration_form.vue
+++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue
@@ -97,7 +97,7 @@ export default {
         id="cluster_environment_scope"
         v-model="envScope"
         name="cluster[environment_scope]"
-        class="col-md-6"
+        class="gl-col-md-6"
         type="text"
       />
     </gl-form-group>
@@ -111,7 +111,7 @@ export default {
         id="cluster_base_domain"
         v-model="baseDomainField"
         name="cluster[base_domain]"
-        class="col-md-6"
+        class="gl-col-md-6"
         type="text"
       />
       <div class="form-text gl-inline-block gl-text-subtle">
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 976d1d65a1874a..96b968a6c6ae0b 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -269,7 +269,7 @@ export default {
     >
       <template #cell(name)="{ item }">
         <div
-          class="gl-flex gl-flex-wrap gl-justify-end gl-gap-3 gl-font-normal md:gl-justify-start"
+          class="gl-flex gl-flex-wrap gl-justify-end gl-gap-3 gl-font-normal @md/panel:gl-justify-start"
         >
           <gl-link :href="item.webPath" data-testid="cluster-agent-name-link">{{
             item.name
@@ -289,7 +289,7 @@ export default {
       <template #cell(status)="{ item }">
         <span
           :id="getStatusCellId(item)"
-          class="md:gl-pr-5"
+          class="@md/panel:gl-pr-5"
           data-testid="cluster-agent-connection-status"
         >
           <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3">
diff --git a/app/assets/javascripts/clusters_list/components/agents_configs_table.vue b/app/assets/javascripts/clusters_list/components/agents_configs_table.vue
index 6a9f5c771cd261..932bfd949bf4e1 100644
--- a/app/assets/javascripts/clusters_list/components/agents_configs_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agents_configs_table.vue
@@ -50,7 +50,7 @@ export default {
           key: 'configuration',
           label: this.$options.i18n.configurationLabel,
           isRowHeader: true,
-          tdClass: `${tdClass} md:gl-w-4/5`,
+          tdClass: `${tdClass} @md/panel:gl-w-4/5`,
           thClass,
         },
         {
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 62a6c3c033c7cc..fae76de3d8416e 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -59,7 +59,7 @@ export default {
       'totalClusters',
     ]),
     contentAlignClasses() {
-      return 'gl-flex gl-items-center gl-justify-end md:gl-justify-start';
+      return 'gl-flex gl-items-center gl-justify-end @md/panel:gl-justify-start';
     },
     currentPage: {
       get() {
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 48571d7aec4fd9..18f3146e2840d3 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -99,7 +99,7 @@ export default {
       :title="$options.i18n.actionsDisabledHint"
     />
 
-    <gl-button-group ref="actions" class="gl-mb-3 gl-w-full md:gl-mb-0 md:gl-w-auto">
+    <gl-button-group ref="actions" class="gl-mb-3 gl-w-full @md/panel:gl-mb-0 @md/panel:gl-w-auto">
       <gl-button
         v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
         :href="defaultActionUrl"
diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue
index 9f5b6ef602b9c6..e81df3c963619b 100644
--- a/app/assets/javascripts/comment_templates/components/form.vue
+++ b/app/assets/javascripts/comment_templates/components/form.vue
@@ -171,7 +171,7 @@ export default {
       :state="isContentValid"
       :invalid-feedback="__('Please enter the comment template content.')"
       data-testid="comment-template-content-form-group"
-      class="lg:gl-max-w-8/10"
+      class="@lg/panel:gl-max-w-8/10"
     >
       <markdown-editor
         v-model="updateCommentTemplate.content"
diff --git a/app/assets/javascripts/contributors/components/individual_chart.vue b/app/assets/javascripts/contributors/components/individual_chart.vue
index 1d23273fd0295b..b467756669ce35 100644
--- a/app/assets/javascripts/contributors/components/individual_chart.vue
+++ b/app/assets/javascripts/contributors/components/individual_chart.vue
@@ -71,7 +71,7 @@ export default {
 </script>
 
 <template>
-  <div class="col-lg-6 col-12 gl-my-5">
+  <div class="gl-col-lg-6 gl-col-12 gl-my-5">
     <h4 class="gl-mb-2 gl-mt-0" data-testid="chart-header">{{ contributor.name }}</h4>
     <p class="gl-mb-3" data-testid="commit-count">
       {{ n__('%d commit', '%d commits', commitCount) }} ({{ contributor.email }})
diff --git a/app/assets/javascripts/credentials/components/credentials_filter_sort_app.vue b/app/assets/javascripts/credentials/components/credentials_filter_sort_app.vue
index 2065334959efaa..b4fb5650590980 100644
--- a/app/assets/javascripts/credentials/components/credentials_filter_sort_app.vue
+++ b/app/assets/javascripts/credentials/components/credentials_filter_sort_app.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-flex gl-flex-col gl-gap-3 md:gl-flex-row">
+  <div class="gl-flex gl-flex-col gl-gap-3 @md/panel:gl-flex-row">
     <gl-filtered-search
       class="gl-min-w-0 gl-grow"
       :value="tokens"
diff --git a/app/assets/javascripts/custom_emoji/components/app.vue b/app/assets/javascripts/custom_emoji/components/app.vue
index 00b904fbea49bc..6f16a15717ab31 100644
--- a/app/assets/javascripts/custom_emoji/components/app.vue
+++ b/app/assets/javascripts/custom_emoji/components/app.vue
@@ -4,7 +4,7 @@ export default {};
 
 <template>
   <div class="row gl-mt-5">
-    <div class="col-12">
+    <div class="gl-col-12">
       <h4 class="gl-mt-0">
         {{ __('Custom emoji') }}
       </h4>
diff --git a/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js b/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
index df6f2c9b0a83ce..2ba990c177dd66 100644
--- a/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
+++ b/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
@@ -93,7 +93,7 @@ describe('Abuse Report Add Note', () => {
           'note-comment',
           'discussion-reply-holder',
           '!gl-border-t-0',
-          'clearfix',
+          'gl-clearfix',
         ]),
       );
 
diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
index dfbac5f7ef1c56..efd1eebb20b758 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
@@ -24,7 +24,7 @@ exports[`Alert integration settings form default state should match the default
       </gl-form-checkbox-stub>
     </gl-form-group-stub>
     <gl-form-group-stub
-      class="col-8 col-md-9 gl-px-6"
+      class="gl-col-8 gl-col-md-9 gl-px-6"
       label-for="alert-integration-settings-issue-template"
       label-size="sm"
       labeldescription=""
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index fdfdd2d0b6b92b..4d70ec3043baa2 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -138,7 +138,7 @@ describe('Blob Header Default Actions', () => {
       createComponent();
 
       expect(wrapper.findComponent(GlButtonGroup).attributes('class')).toBe(
-        'gl-hidden sm:gl-inline-flex',
+        'gl-hidden @sm/panel:gl-inline-flex',
       );
     });
   });
diff --git a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
index 357c7b7e9f8a4d..555d31aa430cab 100644
--- a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
+++ b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Branch divergence graph component renders ahead and behind count 1`] = `
 <div
-  class="divergence-graph gl-hidden md:gl-block px-2"
+  class="!gl-px-3 @md/panel:gl-block divergence-graph gl-hidden"
   title="10 commits behind main, 10 commits ahead"
 >
   <graph-bar-stub
@@ -11,7 +11,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
     position="left"
   />
   <div
-    class="float-left graph-separator mt-1"
+    class="!gl-float-left !gl-mt-2 graph-separator"
   />
   <graph-bar-stub
     count="10"
@@ -23,7 +23,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
 
 exports[`Branch divergence graph component renders distance count 1`] = `
 <div
-  class="divergence-graph gl-hidden md:gl-block px-2"
+  class="!gl-px-3 @md/panel:gl-block divergence-graph gl-hidden"
   title="More than 900 commits different with main"
 >
   <graph-bar-stub
diff --git a/spec/frontend/branches/components/graph_bar_spec.js b/spec/frontend/branches/components/graph_bar_spec.js
index 585b376081b594..5df25c315ed280 100644
--- a/spec/frontend/branches/components/graph_bar_spec.js
+++ b/spec/frontend/branches/components/graph_bar_spec.js
@@ -30,7 +30,7 @@ describe('Branch divergence graph bar component', () => {
     position   | textAlignmentClass
     ${'left'}  | ${'text-right'}
     ${'right'} | ${'text-left'}
-    ${'full'}  | ${'text-center'}
+    ${'full'}  | ${'!gl-text-center'}
   `(
     'sets text alignment class as $textAlignmentClass for position $position',
     ({ position, textAlignmentClass }) => {
diff --git a/spec/frontend/ci/catalog/components/list/ci_resources_list_item_spec.js b/spec/frontend/ci/catalog/components/list/ci_resources_list_item_spec.js
index 0e69165eaed569..91e80a97d2b308 100644
--- a/spec/frontend/ci/catalog/components/list/ci_resources_list_item_spec.js
+++ b/spec/frontend/ci/catalog/components/list/ci_resources_list_item_spec.js
@@ -112,7 +112,9 @@ describe('CiResourcesListItem', () => {
 
     it('hides the resource description on mobile devices', () => {
       const markdown = findMarkdown();
-      expect(markdown.classes()).toEqual(expect.arrayContaining(['gl-hidden', 'md:gl-block']));
+      expect(markdown.classes()).toEqual(
+        expect.arrayContaining(['gl-hidden', '@md/panel:gl-block']),
+      );
     });
   });
 
-- 
GitLab