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 4873c9fe0535baaf23cd2a703a412ad2625f9e19..e62d96d3b6490a9a9fb4527b3d95ebf9285fdf26 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 530a80ef7d8a24c6a9ad159b9e8242e77580349d..a4fefd28b1d247f52c0a35d1654c9bfda05b5aee 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 73d189ba53e966e9a20931d8892704921bd34213..a066d66d9a82ac8ffb71d8e243e44288e0d8070a 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 de48588954562e766de909e9c5ded942111e61d4..6adca7f9ce13eadf7407e17584d64a152d0bd739 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 0caf0e8f95cde5a090c24894a5fc831777a44cd5..aad00797762014c861ba8b757dadfc90b54356ce 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 53f1b1ad504efe0ad53b86601cb32975bd36cc29..ecb608bae057dc1b5e202aa6eca085a04b03eae8 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 a30f95624b8321041cdfa0d258c14b6e0a9d645f..bbc27ea994939c5cc4ff8a06850f5d2e7d89846a 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 c6baa363a9a6224810d214f8541815324ea86a29..fa37f72c42350a097db7dc3244051de5d6b98303 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 ec955ad59cc193f670b0ec0df0fc076968ced3a9..f10b1abd81a61bebf9b8adb1ad069b09b87a3238 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 c9aa524d2d09f0dd29e2f798cc3d84eb4a921a8f..284aa6db55864c451f2c7e149f293877cafcb8cb 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 54910c2c47610351bb1ef64ad0b70de20891985d..f09220678a4e439f1ccd846ac276fcb72d770285 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 5df7d97709103e9106a0a1a80c89397cada1e505..a0f36781b2ee7e85408be426aa96378a8d80d6c8 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 deffc3715264a75a074eca01de4e1ad993b0a7e1..25afda4c39385573383337d4687c99cffacba5db 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 b6ca02b3c35b28ee6213c371e9f3efe48e67b63f..34c82b37250a07ff91ebed04dd019eeb01f213d5 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 cd9fed3bec06742bcab5a93f7fbf3047b27923cc..ac9cf28c07fdd24f13098a5cf7056d0031fbd2ec 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 20257b93862ae167c59fa29df58da3c6444ac033..b21d24a7263898db537c1154787ba46cb3a8ef9a 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 ab3fd9d935f5d851934743f6fb1116437e38805f..cd1848a9bd4d9356be7aff93cf8c67df16ce7c6c 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 66f5d6eaa650af15a871e4acef9e84d6681f1239..37004a557593d438a6781090a3ef91225b8cc486 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 138f611251de86a04af4cff58368fb73a51f13e2..e6e1a6ee9af929686fcbe1e9e1d886678241450d 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 cdba1fe8f14c1e18a01f86b4f90ac9c153f8ca02..bf6c11b16ae5dfe6b94fcba5919aa8abd5a7b0b4 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 22001447246b94b237a146beb900f49ffe72343e..6f25c275848e3246bab9636cbc0d15b7bb70fd79 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 bb05a1e3b78e958e4e073c8b84e5a79c79eaf1d7..26dc09e4a47896f2c4102c4675716eaa1c111a62 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 144571ce0c38978f9a01c4d20d236744ce9404e2..ead2dc48b861cf36fa17143dfb0fac9e851b1428 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 53172f4a42104d9992bebaed8aefce6927ccc693..33a932344fe413b28f1a75b1e96f5c33130166c4 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 bb29224cda27eb9aeabbedb97702c30874c060f3..a81e1174fc9878720f693215a43b109577c6dd77 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 3cde39b79a3443671e1c2bf8b5714669382327d4..02defa01e11e905a508a68d0e1fdb4b4f1ea5dba 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 8dd0ed2879ba8e3c6d3244a0b48301ecadf9200f..7080ef15595a3de6c27ee76c55e8401a8dc334c6 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 5a49b47ac86b31d4baba0479a6f95155b5e97754..3961167f66f45ebb449eba1ed3979afb324b0e53 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 a834c9f4c06e7ecc7db674ea5842bcd36bc3443d..ba323eed0a54428ea45bcc427fa1b5ef507ae92d 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 45a429232b3f71570928fa62edce1720e6922a54..b10e1d2b4702d2b674a40d9f77771e2a39d8f566 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 83b2b3a37cf6793bd1f67dcc63827fd7c9d823c7..8152f832b3b1ea38315260785587ab088a5c72f9 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 5985cdf77289c52f8193977ce50caf7a9b10fd86..b7fabead238c9fa07e5364784994d8a328c82c9e 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 22d1b1135b44c9ba766a47ef59e7c7b7c8b36af3..c3a451e7c6d1d5efa0c93ae9c89cbde51f6b1352 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 fce30510694a10573e9aadb13e25777a913880af..2a7bc08d8ebb39366e74b7974a9bbf8d664e342b 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 9c2569a11b7c27a90709466826192ff9331fea0f..06685f2f0ea59360e1195f0f30861d3421f22ff2 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 dad3e265b009d44122a4d8f2c830d40aaf7cce48..86ea7c003015278cc5b0ca12477d603f3285978c 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 481fc2a778dfb4c7b1414a60f123e5c6654a1e44..48757381037f09062d0b47623c27956185022e38 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 66d8120612f5aaf3ce5f5bb23ffcd41b012b209d..85ef58036e247e12e39644ac4a2453142c548e35 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 ee3afb2d110634618ed032a49c5a793690b79fe4..0a5b071d9395c058cd06cbc3c3c2dc30e9986347 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 eeeb7c16ba3f7fe42b37b9ad48d67c048d80baaf..4b30addee98b0c213be524d401dd941d87fc383b 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 cd60d984009025c044b00635c969c5889cd6b38d..875da6398493fe0ec595f0d0a78ddc37e7257207 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 b257030f1c378905a7f8f93ab7d31f4efd44ec97..a44475488cc4d07b15e0b9deb87cac47d46d794f 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 86896d68bde032405141e1241684f2f855910b19..10e754b404087e5930305640604522e1a46a1228 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 af7b011ba06eede26510858a971d62f064807cd5..1cce96dc96406468408ce45fcb23efcc71e12528 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 0c7bdbb2f2ee06d1aeb23bde88be122c604ac4ce..a4b21afd4f967ebcc6ed204a286ee86b60b27e20 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 b48536c5154481d2f860dfa232af36cf30eeb02d..3c18bd99d8400e707e1b1f8e5b7c1fb604fce880 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 11f06496dcf096807b28a5808803dea179f0835c..3776e51a0a0023038b43c2bb08cf85dedbf3b902 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 228f9dc03049127b4d3f387ab22a7ff9bcb1f3ee..94f2857b074f0b7129676456468ce9bb29ba4d42 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 ca5752f8f7bc2efa2c1f7930503f2d84e31537f4..60643b1e84839e1f82fb51e7f102cac4c9982fd0 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 0e87ae19e8fc46c81c068f6a4cb087355eb91fe0..9088c83dbb269618bc1414d71990918a85189ecf 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 0a5db023d85e608802b9add5149e77b4f7184afc..89b422858a7e6ae8f1e280ffbfe59826c4a15698 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 0b970c5267d73f100b19efca91e4cd5838efc2e5..d17f8047b4352423c69a1fc9dd1b0074faa71b8e 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 c04efc7d7e11ec180db4a31968540727cc2e1e9d..657fd77d932fd07191d0ffbf1a0cc967af03ed56 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 d758e46d23e3c1391e1c2de8c1939a9deb00bc1f..fec8824e48652c20e7448fa6fe05eb54931c9e62 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 1dc436d698db37948d96b8441a692eccb55e8fd4..e18867f5d5e0f1d89704d69d18fcabedec14c805 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 39b8af4886ebb75bbd3246878b1a09b263fbfb38..acd6777f374f23067423285a1c29f7e93c6188f1 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 913ec6b75a05356722f0564fd2b70c7da09e8cd2..9b3c7378eefd5acb770fe52067e0c3c915c02091 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 642fb3533d90bb749c9d7fb8d8b25322ffaaa566..35ea9c2cbbec49e6dd9a0f5664258086fd5a0c26 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 a773a61f3b9e5932632c82093ed4bdd1f7b4cb6f..12f3c24ea270a131aebeb8860edc62e424cae340 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 b8cc354bc1a1d5144cc2d72f7bafcd30b03a41b6..b8beba01915f0167822bcb1f39eb4b45853967bc 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 2a4bbb8485926e86acfa25e8123b975974c5762f..b9755295dbdb42d14c61901a6ce4abf97bc00e69 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 553e07049709d55d6e556b8487d07930e62e63ba..2dfa9c27af5cd4560302eddb9223987cabf75ffc 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 b49537ac5c494bb58e9efcb99ee2c859cc33c0fa..c8cff0bf8363b49c3197552791de7e736dddc1f7 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 174583226bff83160db00ec1bc6945c88920bce9..656160a835dabc25700294ae5285ba1e6ee4a909 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 ec16204c24964a5d92f28093714bfba66b0262e1..cec86fe2a1b0762f02be79216a8f9cdc9c8e148e 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 1bf2ef7ccd217ae32ebe1038931b27f55b9e7a01..030dea465eb985b5a30cc6235b38cb8a3b801fb5 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 ef3b1675136ffbd8767051ac93dd3417e7a0292c..37e780a6c948a4a408ea23380a9125b70cc1f65a 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 1b489930756ec082e2c92ee6a3e04764eb49ea93..387d333f48a61e83b69b119a42508a798b71012a 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 d88e3b7e9d5397893ab0db25e9040bd483b4cc4e..2f67623b10a69ac2996d4993f159125062cfbbe2 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 4265df48fcc50c904377cf683278359a5f94fd79..d29f47b5afa8d9cac5a18dadb3e3f719fb02680c 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 976d1d65a1874aa7294c3096195fc04b6212d648..96b968a6c6ae0bd1c864daad6223f4e86eb8af3a 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 6a9f5c771cd2615de0977d028cfdb4d798ee40da..932bfd949bf4e144707d56a548ab31fce6a8367b 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 62a6c3c033c7cc9f6d22bbca2a127a08cc4a6ac0..fae76de3d8416e980c6f92d8a457d5dcc2a037ae 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 48571d7aec4fd95869ee3c31b7a9c600328b6fd0..18f3146e2840d30e04b70e7c08d7db38fa321971 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 9f5b6ef602b9c631f7b70a662dd62d7a39abb1c8..e81df3c963619b421f8e9851b0bfe6a7a380aa1f 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 1d23273fd0295bbd6a035935852824c2746c6caf..b467756669ce35a8b0e1f7ed263fb500930f056e 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 2065334959efaae9ef8373f96e1b095b98723772..b4fb565059098057db3eff0033efa772c12e9886 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 00b904fbea49bc037f5d92f25b2fade9e0dbb485..6f16a15717ab31ea26057f112db8aad423f6fa68 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 df6f2c9b0a83ce3f5c182c4fa385952f203c8476..2ba990c177dd669ea1aef6c5db6476d1ada65349 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 dfbac5f7ef1c564b2d45b13bac911bf1a77fa246..efd1eebb20b758616a7c4cc22da95a97028df7f9 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 fdfdd2d0b6b92b631e37189deb44ef250218950f..4d70ec3043baa2e71ab6b5d56a81ef3b6ed88f52 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 357c7b7e9f8a4d3eb43ae92bac4f286f1d181a4c..555d31aa430cabbcfbf32251f9c960743f498bd4 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 585b376081b594a9e289748f1a630ac412f8ce62..5df25c315ed2809f80cb3bdee276597243e4f89e 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 0e69165eaed569c305cc3d35bd3d283b3e00ee66..91e80a97d2b308551b593cbd37d40c4b48d5c874 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']),
+      );
     });
   });