energy-foundations 2.4.0 → 2.5.0-beta.1

package/llms/04-layouts.md

@@ -0,0 +1,437 @@
+# Layouts A/B, Grid e integración Vue/AEM
+
+Layout A es el valor por defecto y Layout B es editorial y opt-in. No migres portales existentes ni cambies sus breakpoints sin una petición explícita.
+
+## Contrato de página
+
+| Perfil | Contexto tipográfico | Contenedor | Grid |
+|---|---|---|---|
+| A | body sin atributo data-rds-layout | .rds-layout-max o @include rds.layout-max (contextual) | .rds-grid |
+| B | body[data-rds-layout="b"] | .rds-layout-max o @include rds.layout-max (contextual) | .rds-grid (contextual) |
+
+El contenedor .rds-layout-max y el grid .rds-grid siguen automáticamente el atributo del body. No existe contenedor ni clase de grid editorial local. Los helpers rds-col-* y Flex responsive siguen usando los cortes de A; no los trates como helpers B.
+
+Solo la página o el shell controla el atributo global. Dos perfiles tipográficos simultáneos requieren un contexto local diseñado expresamente; no alternes el body desde componentes individuales.
+
+## API y breakpoints
+
+### Breakpoints Sass
+
+A Layout A Sin atributo en el body (por defecto)
+`mobile`: max-width: 719px
+`tablet`: min-width: 720px
+`desktop`: min-width: 1280px
+`desktop-large`: min-width: 1440px
+`ultrawide`: min-width: 1600px
+B Layout B Con body[data-rds-layout="b"]
+`mobile`: max-width: 799px
+`tablet`: min-width: 800px
+`desktop`: min-width: 1024px
+`desktop-large`: min-width: 1250px
+`ultrawide`: min-width: 1584px
+
+Los nombres son los mismos en ambos layouts: el atributo del `body` decide qué valor se aplica.
+
+```scss
+.component {
+  // Mobile first
+
+  @include breakpoint(tablet) {
+    // Layout A desde 720px y Layout B desde 800px, según el body
+  }
+}
+```
+
+#### Breakpoints contextuales
+
+`breakpoint` siempre tiene en cuenta el layout declarado en el `body` para los nombres semánticos (`mobile`, `tablet`, `desktop`, `desktop-large` y `ultrawide`). No hay parámetros ni configuración que activar:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.card {
+  flex-direction: column;
+
+  @include rds.breakpoint(desktop) {
+    flex-direction: row;
+  }
+}
+```
+
+El mixin genera dos reglas excluyentes: desktop desde 1280px bajo `body:not([data-rds-layout="b"])`
+y desde 1024px bajo `body[data-rds-layout="b"]`. `:where()` no aumenta la especificidad.
+Sin atributo, o con `data-rds-layout="a"`, se aplica A. El mismo CSS compilado sirve para ambos layouts.
+Los estilos base quedan fuera del mixin y se comparten.
+
+También puede usarse en el nivel raíz, escribiendo los selectores dentro del bloque. Ambas formas aplican los mismos cortes:
+
+```scss
+@include rds.breakpoint(desktop) {
+  .card {
+    flex-direction: row;
+  }
+}
+```
+
+En el nivel raíz, Sass no permite al mixin inspeccionar los selectores del bloque, así que el contexto se añade delante (`:where(body…) .card`). Por eso, dentro del bloque solo deben ir selectores cuyos ancestros estén dentro del `body`. Usa la forma anidada cuando el selector:
+
+- sea `:root`, `html` o `body`;
+- dependa de una clase o atributo del `body` o del `html`, como `.dark .card`, `[dir='rtl'] .card` o `.no-js .card`.
+
+Tampoco escribas declaraciones sueltas en el nivel raíz: se aplicarían sobre el propio `body`.
+
+Los breakpoints anidados reutilizan el layout del breakpoint exterior, así que solo se añade un contexto:
+
+```scss
+.card {
+  @include rds.breakpoint(tablet) {
+    gap: 16px;
+
+    @include rds.breakpoint(desktop) {
+      gap: 24px; // A: 720px y 1280px · B: 800px y 1024px
+    }
+  }
+}
+```
+
+En la forma anidada, la condición del layout se comprueba sobre el propio elemento seleccionado, así que funcionan también las condiciones del `body` o del `html` y los propios `body`, `html` y `:root`:
+
+```scss
+:root {
+  --page-gap: 16px;
+
+  @include rds.breakpoint(desktop) {
+    --page-gap: 24px;
+  }
+}
+
+.dark .card {
+  @include rds.breakpoint(tablet) {
+    padding: 24px; // funciona aunque .dark esté en el body
+  }
+}
+```
+
+- La condición se inserta al principio del elemento seleccionado: `.dark :where(body[data-rds-layout='b'], body[data-rds-layout='b'] *).card`. Así siguen funcionando `&--modificador`, `&__elemento`, `&:hover` y los pseudoelementos.
+- `html` y `:root` comprueban su `body` hijo con `:has()`: `:where(:has(> body[data-rds-layout='b'])):root`. Requiere Chrome 105, Safari 15.4 o Firefox 121; en navegadores sin `:has()` esa regla no se aplica y se mantiene el valor base.
+- Todas las condiciones van dentro de `:where()`, así que la especificidad no cambia.
+- Un selector que ya limita el layout a mano (`body[data-rds-layout='b'] .card`) compila y solo se aplica en Layout B, con los cortes de B.
+
+Las claves personalizadas añadidas al mapa `$breakpoints` son cortes fijos que no dependen del `body`.
+Los valores se leen del mapa `$breakpoints` configurado por el consumidor. Si falta uno de los dos cortes de un nombre semántico, la compilación falla.
+Una clave desconocida mantiene el warning histórico.
+
+El contexto se resuelve a partir del `body` del documento, así que no funciona dentro de Shadow DOM. Un iframe utiliza el atributo de su propio `body`.
+En Vue `scoped`, el contexto global debe quedar fuera del scope: utiliza un bloque de estilos no scoped para estas reglas.
+El atributo global del `body` selecciona B y las clases `.rds-layout-max` y `.rds-grid` adaptan sus reglas al contexto.
+
+Si distribuyes CSS precompilado, el atributo del `body` debe estar presente en la página para seleccionar el perfil correspondiente.
+
+Las primitivas internas que necesitan cortes fijos (helpers `rds-col-*`, Flex responsive y la escala tipográfica) usan un mixin interno que no forma parte de la API pública.
+En páginas sin atributo, los cortes son los mismos que antes: no es necesario migrar las integraciones existentes de Layout A.
+
+### Contenedores
+
+LEGACY
+`.rds-e-layout-max`
+Alias compatible de `.rds-layout-max`, con el mismo comportamiento contextual.
+CONTEXTUAL A/B
+`.rds-layout-max`
+Layout A: padding 16px mobile, 24px tablet y 32px desktop, máximo 1600px. Layout B: padding progresivo hasta 72px, máximo 1584px.
+MIXIN SASS
+`@include layout-max`
+El mismo contenedor aplicado a tu propio selector, para cuando no puedes o no quieres añadir la clase al HTML.
+
+`.rds-layout-max` sigue el layout declarado en `body[data-rds-layout]`: aplica los márgenes de A sin atributo (o con `"a"`) y los de B con `data-rds-layout="b"`. Así, componentes y plantillas transversales no necesitan conocer el layout de la página.
+
+```html
+<body data-rds-layout="b">
+  <main class="rds-layout-max">...</main>
+</body>
+```
+
+- No existe un contenedor editorial local: el contenedor siempre sigue al `body`.
+- Los selectores de contexto usan `:where()`, así que la especificidad es la misma que la de una clase simple.
+
+#### Como mixin Sass
+
+Si no puedes añadir la clase al HTML (por ejemplo, en un componente de AEM o en una plantilla de terceros), aplica el mismo contenedor desde Sass con `layout-max`:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.portal-main {
+  @include rds.layout-max;
+}
+```
+
+Genera exactamente las mismas reglas que `.rds-layout-max`, aplicadas a tu selector: los márgenes de A o de B según el atributo del `body`, sin parámetros que elegir.
+
+- Debe usarse dentro de un selector; en el nivel raíz la compilación falla con un mensaje claro.
+- Funciona con cualquier selector, también sobre el propio `body` o con condiciones del `body` o del `html`, como `.dark .portal-main`.
+- La especificidad es la de tu selector: el mixin no la aumenta.
+- Puedes combinarlo con tus propias reglas; declara después las que quieras que prevalezcan.
+
+### Composición contextual
+
+El contenedor `.rds-layout-max` y el grid `.rds-grid` siguen al `body`, por lo que la página no necesita seleccionar una clase de grid editorial alternativa.
+
+```html
+<body data-rds-layout="b">
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+Con `data-rds-layout="b"`, la tipografía, el contenedor y el grid usan los cortes de Layout B. Para Layout A, omite el atributo. El contenedor solo controla ancho y márgenes; el grid controla columnas y gaps.
+
+Resuelve el perfil una sola vez en el shell de Vue o en el Page Component de AEM. Al cambiar de ruta, actualiza el contexto global del destino y las primitivas se adaptan.
+
+Esta composición no cambia los helpers `rds-col-*` ni Flex responsive: siguen usando los breakpoints de A. Para spans editoriales, utiliza las reglas Sass del perfil B descritas en Grid.
+
+### Referencia de Grid
+
+Columnas, gaps, offsets y ejemplos interactivos tienen su propia página en Layout / Grid.
+
+### Tipografía responsive
+
+Las clases y el mixin de tipografía leen el contexto global. No es necesario elegir un mixin distinto por layout:
+
+```scss
+.component__title {
+  @include rds-font-style('headline-01');
+}
+```
+
+```html
+<h1 class="rds-headline-01">Título responsive</h1>
+```
+
+Mobile Base Ambos layouts
+Desktop A · 1280px B · 1024px
+Ultrawide A · 1600px B · 1584px
+
+No existe una escala tipográfica específica para tablet. El breakpoint `desktop-large` modifica la maquetación, pero no introduce por sí mismo una nueva escala tipográfica.
+
+## Grid: columnas, offsets y perfil editorial
+
+### Columnas y offsets · Layout A
+
+El perfil A usa 4 columnas con gap de 16px hasta 719px, 8 columnas con gap de 16px desde 720px y 12 columnas con gap de 24px desde 1280px.
+El perfil B usa 4 columnas con gap de 16px hasta 799px, 8 columnas con gap de 24px desde 800px y 12 columnas con gap de 24px desde 1024px.
+
+El patrón `rds-col-{abbr}-{n}` selecciona el span; `rds-col-{abbr}-{n}-offset-{offset}` fija el inicio en offset + 1.
+El helper `rds-col-{n}` solo se genera en los rangos que admiten ese número de columnas: no reduce un span grande para que quepa en mobile.
+
+No se generan aliases `sm`, `lg`, `xl` ni columnas `xd`. Las reglas `md` permanecen activas en desktop si no las sustituyes.
+Los offsets disponibles van de cero a `máximo de columnas - n`.
+
+```html
+<div class="rds-layout-max">
+  <div class="rds-grid">
+    <article class="rds-col-sd-4 rds-col-md-4 rds-col-ld-6">
+      Contenido
+    </article>
+  </div>
+</div>
+```
+
+```html
+<article class="rds-col-sd-4 rds-col-md-4-offset-2">
+  En tablet ocupa 4 columnas y empieza en la tercera.
+</article>
+```
+
+### Grid contextual · Layout B
+
+El grid `.rds-grid` usa automáticamente los cortes de B cuando el `body` tiene `data-rds-layout="b"`.
+Los helpers `rds-col-*` actuales se generan con los cortes de A. Para spans que sigan el layout de la página, define las columnas en el Sass del componente con `breakpoint`, que aplica los cortes de A o B según el `body`:
+
+```html
+<div class="rds-layout-max">
+  <div class="rds-grid">
+    <article class="portal-editorial-card">Contenido</article>
+  </div>
+</div>
+```
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.portal-editorial-card {
+  grid-column: span 4;
+
+  @include rds.breakpoint(tablet) {
+    grid-column: span 4; // A: desde 720px · B: desde 800px
+  }
+
+  @include rds.breakpoint(desktop) {
+    grid-column: span 6; // A: desde 1280px · B: desde 1024px
+  }
+}
+```
+
+### Prueba el grid
+
+## Integración Vue: público B y privado A
+
+### Caso habitual: público B, privado A
+
+Una misma SPA puede utilizar Layout B en la parte pública y Layout A después del login. Se comparte el mismo bundle CSS y no es necesario que los componentes conozcan el layout.
+
+#### 1. Declara el layout en Vue Router
+
+```ts
+import type { RouteRecordRaw } from 'vue-router'
+
+type RdsLayout = 'a' | 'b'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    rdsLayout?: RdsLayout
+    requiresAuth?: boolean
+  }
+}
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('./layouts/PublicLayout.vue'),
+    meta: { rdsLayout: 'b' },
+    children: [
+      { path: '', component: () => import('./views/HomeView.vue') },
+      { path: 'login', component: () => import('./views/LoginView.vue') },
+    ],
+  },
+  {
+    path: '/app',
+    component: () => import('./layouts/PrivateLayout.vue'),
+    meta: { rdsLayout: 'a', requiresAuth: true },
+    children: [
+      { path: '', component: () => import('./views/DashboardView.vue') },
+    ],
+  },
+]
+```
+
+Las rutas hijas heredan la metadata de la ruta padre y pueden sobrescribirla cuando exista una excepción.
+
+#### 2. Sincroniza el `body` desde un único punto
+
+```ts
+import type { Router } from 'vue-router'
+
+type RdsLayout = 'a' | 'b'
+
+function applyRdsLayout(layout: RdsLayout): void {
+  if (layout === 'b') {
+    document.body.dataset.rdsLayout = 'b'
+    return
+  }
+
+  document.body.removeAttribute('data-rds-layout')
+}
+
+export function installRdsLayoutSync(router: Router): void {
+  router.afterEach((to) => {
+    applyRdsLayout(to.meta.rdsLayout ?? 'a')
+  })
+}
+```
+
+```ts
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+installRdsLayoutSync(router)
+
+await router.isReady()
+
+createApp(App)
+  .use(router)
+  .mount('#app')
+```
+
+#### 3. Mantén autenticación y presentación separadas
+
+```ts
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    return {
+      path: '/login',
+      query: { redirect: to.fullPath },
+    }
+  }
+})
+```
+
+El guard decide si la navegación está permitida. `afterEach` aplica el layout de la ruta finalmente confirmada. No obtengas el layout directamente de `isAuthenticated`: podría existir una página pública A o una sección autenticada B.
+
+### Casos especiales
+
+## Integración Adobe AEM y Catálogo Zero
+
+### Un único propietario: el Page Component
+
+El layout debe resolverse en el Page Component, template o policy porque esa capa controla el `body`.
+
+```html
+<!-- Layout A: valor por defecto -->
+<body>
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+```html
+<!-- Layout B: selección editorial -->
+<body data-rds-layout="b">
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+La selección puede proceder del template, una Page Policy, una propiedad de página o la configuración global del portal.
+
+### Contrato Sling Model → HTL
+
+El Sling Model debe normalizar la configuración y exponer valores seguros y predecibles:
+
+```html
+<body data-rds-layout="${pageModel.rdsLayout}">
+  <main class="${pageModel.layoutContainerClass}">
+    <div class="${pageModel.gridClass}">
+      <!-- Contenido de la página -->
+    </div>
+  </main>
+</body>
+```
+
+El modelo debe aceptar únicamente una whitelist de valores conocidos. No copies texto libre del autor directamente en atributos o clases. Para Layout A, HTL debe omitir el atributo vacío o dejarlo sin efecto.
+
+### Catálogo Zero
+
+Los componentes comunes y moleculares:
+
+- No consultan la propiedad de página.
+- No reciben un parámetro `layout` para elegir tipografía.
+- No se duplican como componente A y componente B.
+- Permiten que el Page Component y Foundations resuelvan el contexto.
+
+Los componentes específicos de portal siguen el mismo contrato. `.rds-layout-max` adapta sus márgenes al atributo del `body`, pero ninguna clase cambia por sí sola los breakpoints tipográficos de la página.
+
+Si la plantilla HTL no permite añadir la clase al contenedor, aplica el mismo comportamiento desde el Sass del componente:
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.cmp-page__main {
+  @include rds.layout-max;
+}
+```
+

package/llms/index.md

@@ -5,6 +5,9 @@ Generated for intelligent coding assistants.
 ## Guides
 
 - [Installation & Quick Start](./00-installation.md)
+- [Layouts A/B, Grid and Vue/AEM integration](./04-layouts.md)
+
+For responsive pages, read the layout guide first: body context controls typography, while containers and grids are explicit choices. Layout A remains the default; B is opt-in. Column and responsive Flex helpers still use A breakpoints.
 
 ## Classes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "energy-foundations",
-  "version": "2.4.0",
+  "version": "2.5.0-beta.1",
   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"
@@ -64,10 +64,10 @@
   ],
   "lint-staged": {
     "*.{vue,ts}": [
-      "yarn lint"
+      "eslint"
     ],
     "*.scss": [
-      "yarn stylelint"
+      "stylelint"
     ],
     "package.json": [
       "fixpack --dryRun"
@@ -97,7 +97,9 @@
     "storybook": "storybook dev -p 6006",
     "storybook:preview": "npx http-server storybook-static",
     "stylelint": "npx stylelint '**/*.scss'",
-    "stylelint:fix": "npx stylelint '**/*.scss' --fix"
+    "stylelint:fix": "npx stylelint '**/*.scss' --fix",
+    "test:breakpoints": "node tests/verify-breakpoints.mjs",
+    "test:typography": "node tests/verify-typography.mjs"
   },
   "style": "dist/style.css",
   "type": "module"

package/src/foundations/_grid.scss

@@ -3,46 +3,13 @@
 *************************/
 @use 'sass:map';
 @use '../rds-variables' as *;
+@use '../mixins/breakpoint-fixed' as *;
 
+// Contextual container: follows the page layout declared on body[data-rds-layout].
+// Also available as the `layout-max` mixin for custom selectors.
 .rds-e-layout-max,
 .rds-layout-max {
-  padding: 0 $g-padding-mobile;
-
-  @include breakpoint(tablet) {
-    padding: 0 $g-padding-tablet;
-  }
-
-  @include breakpoint(desktop) {
-    padding: 0 $g-padding-desktop;
-  }
-
-  @include breakpoint(ultrawide) {
-    margin: 0 auto;
-    max-width: 1600px;
-    padding: 0 $g-padding-ultrawide;
-  }
-}
-
-.rds-layout-editorial {
-  padding: 0 $g-padding-mobile;
-
-  @include breakpoint(tablet-v2) {
-    padding: 0 $g-padding-tablet;
-  }
-
-  @include breakpoint(desktop-v2) {
-    padding: 0 $g-padding-desktop;
-  }
-
-  @include breakpoint(desktop-large-v2) {
-    padding: 0 72px;
-  }
-
-  @include breakpoint(ultrawide-v2) {
-    margin: 0 auto;
-    max-width: 1584px;
-    padding: 0 72px;
-  }
+  @include layout-max;
 }
 
 .rds-grid {
@@ -52,23 +19,20 @@
   width: 100%;
 
   @each $breakpoint, $config in $grid-config {
-    @include breakpoint($breakpoint) {
-      gap: map.get($config, gap);
-      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+    :where(body:not([data-rds-layout='b'])) & {
+      @include fixed-breakpoint($breakpoint) {
+        gap: map.get($config, gap);
+        grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+      }
     }
   }
-}
 
-.rds-grid-editorial {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-
-  @each $breakpoint, $config in $grid-config-editorial {
-    @include breakpoint($breakpoint) {
-      gap: map.get($config, gap);
-      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+  @each $breakpoint, $config in $grid-config-b {
+    :where(body[data-rds-layout='b']) & {
+      @include fixed-breakpoint($breakpoint) {
+        gap: map.get($config, gap);
+        grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+      }
     }
   }
 }
@@ -86,7 +50,7 @@ $breakpoint-abbr: (
   $max-columns: map.get($config, max-columns);
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     // Clases sin offset: rds-col-sd-3
     @for $i from 1 through $max-columns {
       .rds-col-#{$abbr}-#{$i} {
@@ -111,7 +75,7 @@ $breakpoint-abbr: (
   
   @for $i from 1 through $max-columns {
     .rds-col-#{$i} {
-      @include breakpoint($breakpoint) {
+      @include fixed-breakpoint($breakpoint) {
         grid-column: span #{$i};
       }
     }
@@ -153,7 +117,7 @@ $flex-prefix: 'rds-flex';
 @each $breakpoint, $config in $grid-config {
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     .#{$flex-prefix}-#{$abbr}-row {
       flex-direction: row;
     }
@@ -186,7 +150,7 @@ $flex-prefix: 'rds-flex';
 @each $breakpoint, $config in $grid-config {
   $abbr: map.get($breakpoint-abbr, $breakpoint);
 
-  @include breakpoint($breakpoint) {
+  @include fixed-breakpoint($breakpoint) {
     .#{$flex-prefix}-grow-#{$abbr} {
       flex-grow: 1;
     }

package/src/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* eslint-disable */
 export const iconLayers = {
   "calendar_active": 8,

package/src/generated/icon-layers.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* eslint-disable */
 export const iconLayers: Record<string, number> = {
   "calendar_active": 8,

package/src/generated/icon-names.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* eslint-disable */
 export const iconNames = [
   "ac-aire-acondicionado",

package/src/generated/icon-names.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-09-16T05:39:24.510Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-19T12:32:44.265Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/src/mixins/_breakpoint-fixed.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../variables/layout' as *;
+
+// Internal fixed media query, independent of body[data-rds-layout].
+// Not forwarded by rds-variables: consumers must use `breakpoint`.
+@mixin fixed-breakpoint($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+
+  // If the key exists in the map
+  @if $value {
+    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
+      @media (max-width: $value) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map.";
+  }
+}