create-openclass-uniminuto 1.6.5 → 1.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-openclass-uniminuto",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "description": "Creador de proyectos Open Class UNIMINUTO basados en Slidev, con generación incremental por semanas, actualización de tema y GitHub Pages.",
   "type": "module",
   "bin": {

package/template/README.md

@@ -133,7 +133,7 @@ Este archivo no se sobrescribe por defecto. Eso permite conservar el contenido d
 
 ### `plantillas/semana.md`
 
-Plantilla base usada al crear una semana nueva. Debe incluir ejemplos de todos los layouts disponibles para que funcione como catálogo inicial.
+Plantilla base usada al crear una semana nueva. Incluye ejemplos de layouts, listas, revelado progresivo con `v-click` y estructuras frecuentes de Open Class.
 
 ### `plantillas/launcher.md`
 
@@ -514,7 +514,180 @@ incluye ejemplos de uso para cada layout.
 
 ---
 
-## 11. Recomendaciones de edición
+## 11. Listas, v-clicks y ajuste automático de contenido
+
+El tema institucional incluye soporte visual para listas no ordenadas, listas numéricas, listas alfabéticas y listas romanas.
+
+### Listas no ordenadas
+
+Markdown permite crear listas no ordenadas con `*`, `-` o `+`.
+
+```md
+* Primer punto
+* Segundo punto
+* Tercer punto
+```
+
+También es válido:
+
+```md
+- Primer punto
+- Segundo punto
+- Tercer punto
+```
+
+Ambas formas se renderizan como una lista HTML tipo `ul`.
+
+### Listas ordenadas numéricas
+
+Para listas ordenadas numéricas, usa Markdown con números:
+
+```md
+1. Primer paso
+2. Segundo paso
+3. Tercer paso
+```
+
+### Listas alfabéticas
+
+Para listas con letras mayúsculas o minúsculas, se recomienda usar HTML dentro de la diapositiva.
+
+```html
+<ol type="A">
+  <li>Primer criterio</li>
+  <li>Segundo criterio</li>
+  <li>Tercer criterio</li>
+</ol>
+```
+
+```html
+<ol type="a">
+  <li>Primera opción</li>
+  <li>Segunda opción</li>
+  <li>Tercera opción</li>
+</ol>
+```
+
+### Listas romanas
+
+```html
+<ol type="I">
+  <li>Primera fase</li>
+  <li>Segunda fase</li>
+  <li>Tercera fase</li>
+</ol>
+```
+
+```html
+<ol type="i">
+  <li>Primer componente</li>
+  <li>Segundo componente</li>
+  <li>Tercer componente</li>
+</ol>
+```
+
+### Revelar elementos con clics
+
+Para revelar una lista punto por punto:
+
+```md
+<v-clicks>
+
+- Primer punto
+- Segundo punto
+- Tercer punto
+
+</v-clicks>
+```
+
+Para controlar manualmente cada elemento:
+
+```html
+<ul>
+  <li v-click>Primer punto</li>
+  <li v-click>Segundo punto</li>
+  <li v-click>Tercer punto</li>
+</ul>
+```
+
+Para títulos, etiquetas o párrafos sueltos:
+
+```html
+<p v-click><strong>Instrucciones:</strong></p>
+
+<ol>
+  <li v-click>Primer paso.</li>
+  <li v-click>Segundo paso.</li>
+</ol>
+
+<p v-click><strong>Producto:</strong> evidencia esperada de la actividad.</p>
+```
+
+Para revelar bloques completos:
+
+```md
+<div v-click>
+
+**Instrucciones:**
+
+</div>
+
+<div v-click>
+
+1. Primer paso de la actividad.
+
+</div>
+
+<div v-click>
+
+**Producto:** resultado esperado.
+
+</div>
+```
+
+### Ajuste automático de contenido
+
+Los layouts principales usan `AutoFitText`, un componente que intenta ajustar el tamaño del texto al área disponible.
+
+Cuando una diapositiva usa `v-click`, el contenido visible cambia con cada clic. Si el valor `max` del texto es demasiado alto, el contenido puede verse muy grande cuando hay pocos elementos visibles y luego reducirse al aparecer más elementos.
+
+Recomendaciones:
+
+* Usa `v-click` en `<p>`, `<li>`, `<span>` o bloques pequeños.
+* Usa `<v-clicks>` cuando quieras revelar automáticamente los elementos hijos.
+* Para listas numeradas, usa `<ol><li v-click>...</li></ol>`.
+* Para listas alfabéticas, usa `<ol type="A">` o `<ol type="a">`.
+* Evita saturar una sola diapositiva con demasiado texto.
+* En contenidos con clics, evita valores `max` demasiado altos.
+* Para Open Class, un rango estable suele estar entre `max="22"` y `max="24"` en contenidos.
+* Si el contenido no cabe con ese rango, divide la información en dos diapositivas.
+
+### Transiciones en Slidev
+
+Las transiciones entre diapositivas se controlan con `transition`.
+
+Ejemplo global en el lanzador raíz:
+
+```md
+---
+transition: fade
+---
+```
+
+Ejemplo por diapositiva:
+
+```md
+---
+layout: slide-08-titulo-texto
+transition: slide-left
+---
+```
+
+Recomendación: usar `fade` como transición general y reservar `v-click`, `<v-click>` o `<v-clicks>` para revelar ideas dentro de una misma diapositiva.
+
+---
+
+## 12. Recomendaciones de edición
 
 No editar manualmente estos archivos salvo que estés modificando la infraestructura:
 
@@ -541,7 +714,7 @@ public/imagenes/
 
 ---
 
-## 12. Despliegue con GitHub Pages
+## 13. Despliegue con GitHub Pages
 
 El workflow está en:
 
@@ -565,7 +738,25 @@ y se publica automáticamente con GitHub Pages.
 
 ---
 
-## 13. Solución de problemas frecuentes
+## 14. Solución de problemas frecuentes
+
+### Error en un layout Vue
+
+Si aparece un error similar a:
+
+```text
+Element is missing end tag
+```
+
+revisar el archivo indicado por la terminal. Normalmente significa que un componente, etiqueta HTML o bloque Vue quedó mal cerrado.
+
+Ejemplo correcto:
+
+```vue
+<TitleRibbon>
+  <slot name="title">Agrega un título</slot>
+</TitleRibbon>
+```
 
 ### Error en `scripts/decks.mjs`
 
@@ -619,9 +810,21 @@ public/fondos/slide-05-template.png
 public/fondos/slide-06-cierre.png
 ```
 
+### El texto cambia mucho de tamaño con los clics
+
+Si una diapositiva usa `v-click` y el texto se agranda o se reduce demasiado al avanzar o retroceder, revisar el valor `max` del `AutoFitText` del layout.
+
+Para contenidos con revelado progresivo se recomienda usar valores moderados:
+
+```vue
+<AutoFitText tag="div" class="content-fit" :min="15" :max="24" line-height="1.26">
+```
+
+Si el contenido sigue sin caber, es mejor dividirlo en dos diapositivas.
+
 ---
 
-## 14. Flujo de mantenimiento del template
+## 15. Flujo de mantenimiento del template
 
 Cuando se mejore el template base:
 

package/template/plantillas/semana.md

@@ -1,6 +1,6 @@
 ---
-layout: slide-01-portada
----
+
+## layout: slide-01-portada
 
 ::title::
 {{COURSE_NAME}}
@@ -11,17 +11,17 @@ Semana {{WEEK_NUMBER}} — {{WEEK_TITLE}}
 ::date::
 {{WEEK_DATE}}
 
----
-layout: slide-02-titulo
 ---
 
+## layout: slide-02-titulo
+
 ::title::
 Ruta de la Open Class
 
----
-layout: slide-08-titulo-texto
 ---
 
+## layout: slide-08-titulo-texto
+
 ::title::
 Contexto de la semana
 
@@ -30,10 +30,10 @@ Esta sesión aborda el tema **{{WEEK_THEME}}** desde una perspectiva aplicada, a
 
 La intención es que el estudiante relacione los conceptos centrales de la semana con situaciones reales del campo disciplinar, identifique problemas, analice alternativas y proponga decisiones fundamentadas.
 
----
-layout: slide-09-objetivos
 ---
 
+## layout: slide-09-objetivos
+
 ::title::
 Objetivos de aprendizaje
 
@@ -45,15 +45,14 @@ Al finalizar esta Open Class, el estudiante estará en capacidad de:
 3. Relacionar la teoría con una actividad práctica o evaluativa.
 4. Formular conclusiones que evidencien comprensión, argumentación y transferencia.
 
----
-layout: slide-03-imagen-izquierda
 ---
 
+## layout: slide-03-imagen-izquierda
+
 ::title::
 Lectura inicial del problema
 
-::image:: 
-<img src="/imagenes/favicon.png" alt="Imagen institucional de apoyo" />
+::image:: <img src="/imagenes/favicon.png" alt="Imagen institucional de apoyo" />
 
 ::content::
 En esta sección se presenta una situación inicial que permite introducir el tema de la semana.
@@ -66,10 +65,10 @@ Ejemplo:
 
 `/imagenes/nombre_de_la_imagen.png`
 
----
-layout: slide-04-imagen-derecha
 ---
 
+## layout: slide-04-imagen-derecha
+
 ::title::
 Análisis del contexto
 
@@ -83,18 +82,16 @@ Puedes usarlo para:
 * Explicar un flujo.
 * Relacionar conceptos con una situación profesional.
 
-::image:: 
-<img src="/imagenes/favicon.png" alt="Imagen de apoyo para análisis del contexto" />
+::image:: <img src="/imagenes/favicon.png" alt="Imagen de apoyo para análisis del contexto" />
 
----
-layout: slide-05-titulo-superior-texto-derecha
 ---
 
+## layout: slide-05-titulo-superior-texto-derecha
+
 ::title::
 Concepto clave de la semana
 
-::image:: 
-<img src="/imagenes/favicon.png" alt="Imagen conceptual de apoyo" />
+::image:: <img src="/imagenes/favicon.png" alt="Imagen conceptual de apoyo" />
 
 ::content::
 Este layout permite destacar una imagen amplia en la parte izquierda y ubicar la explicación en la parte derecha.
@@ -109,10 +106,10 @@ Ejemplo de uso:
 * Escenario problemático.
 * Representación visual de un caso.
 
----
-layout: slide-06-titulo-superior-texto-izquierda
 ---
 
+## layout: slide-06-titulo-superior-texto-izquierda
+
 ::title::
 Relación entre teoría y práctica
 
@@ -128,13 +125,12 @@ Se recomienda usarlo para:
 3. Introducir una práctica guiada.
 4. Preparar al estudiante para una actividad.
 
-::image:: 
-<img src="/imagenes/favicon.png" alt="Imagen de apoyo para teoría y práctica" />
+::image:: <img src="/imagenes/favicon.png" alt="Imagen de apoyo para teoría y práctica" />
 
----
-layout: slide-07-multimedia-con-titulo
 ---
 
+## layout: slide-07-multimedia-con-titulo
+
 ::title::
 Recurso multimedia de apoyo
 
@@ -151,8 +147,8 @@ Recurso multimedia de apoyo
 </iframe>
 
 ---
-layout: slide-08-titulo-texto
----
+
+## layout: slide-08-titulo-texto
 
 ::title::
 Síntesis conceptual
@@ -170,8 +166,8 @@ Ejemplo de estructura sugerida:
 También puedes usar párrafos breves cuando necesites explicar una idea con mayor profundidad académica.
 
 ---
-layout: slide-10-titulo-dos-columnas
----
+
+## layout: slide-10-titulo-dos-columnas
 
 ::title::
 Comparación de enfoques
@@ -199,8 +195,8 @@ Este espacio puede usarse para contrastar una segunda postura, alternativa, comp
 * Ejemplo aplicado.
 
 ---
-layout: slide-11-dos-titulos-dos-columnas
----
+
+## layout: slide-11-dos-titulos-dos-columnas
 
 ::leftTitle::
 Antes del análisis
@@ -229,8 +225,8 @@ Ejemplo:
 * Conclusiones argumentadas.
 
 ---
-layout: slide-codigo
----
+
+## layout: slide-codigo
 
 ::title::
 Ejemplo técnico guiado
@@ -254,8 +250,8 @@ presentar_contexto(tema, actividad)
 ```
 
 ---
-layout: slide-08-titulo-texto
----
+
+## layout: slide-08-titulo-texto
 
 ::title::
 Actividad de aplicación
@@ -274,8 +270,8 @@ Orientaciones sugeridas:
 Duración estimada: **{{WEEK_DURATION}}**.
 
 ---
-layout: slide-10-titulo-dos-columnas
----
+
+## layout: slide-10-titulo-dos-columnas
 
 ::title::
 Preguntas orientadoras
@@ -299,5 +295,91 @@ Preguntas orientadoras
 * ¿Qué aprendizaje se transfiere a un contexto profesional?
 
 ---
-layout: slide-12-cierre
+
+## layout: slide-08-titulo-texto
+
+::title::
+Plantilla para listas y revelado progresivo
+
+::content::
+
+<p v-click><strong>Lista no ordenada:</strong></p>
+
+<ul>
+  <li v-click>Puede escribirse con asterisco, guion o HTML.</li>
+  <li v-click>Funciona bien para ideas, criterios y recomendaciones.</li>
+</ul>
+
+<p v-click><strong>Lista ordenada:</strong></p>
+
+<ol>
+  <li v-click>Primer paso.</li>
+  <li v-click>Segundo paso.</li>
+  <li v-click>Tercer paso.</li>
+</ol>
+
+<p v-click><strong>Lista alfabética:</strong></p>
+
+<ol type="A">
+  <li v-click>Primer criterio.</li>
+  <li v-click>Segundo criterio.</li>
+  <li v-click>Tercer criterio.</li>
+</ol>
+
+---
+
+## layout: slide-08-titulo-texto
+
+::title::
+Plantilla para instrucciones con clics
+
+::content::
+
+<p v-click><strong>Instrucciones:</strong></p>
+
+<ol>
+  <li v-click>Leer la situación propuesta por el docente.</li>
+  <li v-click>Identificar los conceptos principales de la semana.</li>
+  <li v-click>Analizar alternativas de solución o interpretación.</li>
+  <li v-click>Socializar una conclusión breve con argumentos.</li>
+</ol>
+
+<p v-click><strong>Producto:</strong> una respuesta breve con criterio, evidencia y conclusión.</p>
+
+---
+
+## layout: slide-11-dos-titulos-dos-columnas
+
+::leftTitle:: <span v-click>Plantilla animación antes del análisis</span>
+
+::rightTitle:: <span v-click>Plantilla animación después del análisis</span>
+
+::left::
+
+<p v-click>En esta columna puedes describir la situación inicial, las ideas previas, los datos disponibles o las condiciones del problema.</p>
+
+<p v-click><strong>Ejemplo:</strong></p>
+
+<ul>
+  <li v-click>Información dispersa.</li>
+  <li v-click>Criterios poco claros.</li>
+  <li v-click>Necesidad de priorización.</li>
+  <li v-click>Dudas frente a la toma de decisiones.</li>
+</ul>
+
+::right::
+
+<p v-click>En esta columna puedes mostrar el resultado esperado después del análisis.</p>
+
+<p v-click><strong>Ejemplo:</strong></p>
+
+<ul>
+  <li v-click>Criterios definidos.</li>
+  <li v-click>Decisiones justificadas.</li>
+  <li v-click>Evidencias organizadas.</li>
+  <li v-click>Conclusiones argumentadas.</li>
+</ul>
+
 ---
+
+## layout: slide-12-cierre

package/template/theme/uniminuto/components/AutoFitText.vue

@@ -161,4 +161,4 @@ watch(
   outline: 2px dashed rgba(242, 181, 27, 0.85);
   background: rgba(242, 181, 27, 0.08);
 }
-</style>
+</style>

package/template/theme/uniminuto/layouts/slide-03-imagen-izquierda.vue

@@ -18,7 +18,7 @@ import TitleRibbon from '../components/TitleRibbon.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="15" :max="30" line-height="1.26">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="24" line-height="1.26">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -82,3 +82,4 @@ import TitleRibbon from '../components/TitleRibbon.vue'
 .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
 .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 </style>
+

package/template/theme/uniminuto/layouts/slide-04-imagen-derecha.vue

@@ -14,7 +14,7 @@ import TitleRibbon from '../components/TitleRibbon.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="15" :max="30" line-height="1.26">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="24" line-height="1.26">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -82,3 +82,4 @@ import TitleRibbon from '../components/TitleRibbon.vue'
 .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
 .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 </style>
+

package/template/theme/uniminuto/layouts/slide-05-titulo-superior-texto-derecha.vue

@@ -17,7 +17,7 @@ import AutoFitText from '../components/AutoFitText.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="16" :max="34" line-height="1.28">
+      <AutoFitText tag="div" class="content-fit" :min="16" :max="24" line-height="1.28">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -70,3 +70,5 @@ import AutoFitText from '../components/AutoFitText.vue'
 .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 
 </style>
+
+

package/template/theme/uniminuto/layouts/slide-06-titulo-superior-texto-izquierda.vue

@@ -13,7 +13,7 @@ import AutoFitText from '../components/AutoFitText.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="16" :max="34" line-height="1.28">
+      <AutoFitText tag="div" class="content-fit" :min="16" :max="24" line-height="1.28">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -57,3 +57,5 @@ import AutoFitText from '../components/AutoFitText.vue'
 .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 
 </style>
+
+

package/template/theme/uniminuto/layouts/slide-08-titulo-texto.vue

@@ -13,7 +13,7 @@ import AutoFitText from '../components/AutoFitText.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="17" :max="38" line-height="1.30">
+      <AutoFitText tag="div" class="content-fit" :min="17" :max="24" line-height="1.30">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -47,3 +47,5 @@ import AutoFitText from '../components/AutoFitText.vue'
 .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 
 </style>
+
+

package/template/theme/uniminuto/layouts/slide-09-objetivos.vue

@@ -13,7 +13,7 @@ import AutoFitText from '../components/AutoFitText.vue'
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit objetivos-fit" :min="17" :max="38" line-height="1.30">
+      <AutoFitText tag="div" class="content-fit objetivos-fit" :min="17" :max="24" line-height="1.30">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -48,3 +48,5 @@ import AutoFitText from '../components/AutoFitText.vue'
 
 .objetivos-fit :deep(li) { margin-bottom: 0.8rem; }
 </style>
+
+

package/template/theme/uniminuto/layouts/slide-10-titulo-dos-columnas.vue

@@ -13,13 +13,13 @@ import AutoFitText from '../components/AutoFitText.vue'
     </div>
 
     <div class="left-wrap">
-      <AutoFitText tag="div" class="column-fit" :min="14" :max="33" line-height="1.28">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="24" line-height="1.28">
         <slot name="left" />
       </AutoFitText>
     </div>
 
     <div class="right-wrap">
-      <AutoFitText tag="div" class="column-fit" :min="14" :max="33" line-height="1.28">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="24" line-height="1.28">
         <slot name="right" />
       </AutoFitText>
     </div>
@@ -55,3 +55,5 @@ import AutoFitText from '../components/AutoFitText.vue'
 .column-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 
 </style>
+
+

package/template/theme/uniminuto/layouts/slide-11-dos-titulos-dos-columnas.vue

@@ -8,25 +8,39 @@ import TitleRibbon from '../components/TitleRibbon.vue'
     <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
 
     <div class="left-title-wrap">
-      <TitleRibbon align="center" plane-side="left" :show-plane="false" :min="24" :max="44" line-height="1.05">
+      <TitleRibbon
+        side="center"
+        :show-plane="false"
+        min-height="clamp(58px, 7.5vh, 90px)"
+        padding-x="1.8rem"
+        padding-y="0.22rem"
+        font-size="clamp(1.15rem, 1.95vw, 2.35rem)"
+      >
         <slot name="leftTitle">Agrega un título</slot>
       </TitleRibbon>
     </div>
 
     <div class="right-title-wrap">
-      <TitleRibbon align="center" plane-side="left" :show-plane="false" :min="24" :max="44" line-height="1.05">
+      <TitleRibbon
+        side="center"
+        :show-plane="false"
+        min-height="clamp(58px, 7.5vh, 90px)"
+        padding-x="1.8rem"
+        padding-y="0.22rem"
+        font-size="clamp(1.15rem, 1.95vw, 2.35rem)"
+      >
         <slot name="rightTitle">Agrega un título</slot>
       </TitleRibbon>
     </div>
 
     <div class="left-content">
-      <AutoFitText tag="div" class="column-fit" :min="14" :max="31" line-height="1.28">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="24" line-height="1.28">
         <slot name="left" />
       </AutoFitText>
     </div>
 
     <div class="right-content">
-      <AutoFitText tag="div" class="column-fit" :min="14" :max="31" line-height="1.28">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="24" line-height="1.28">
         <slot name="right" />
       </AutoFitText>
     </div>
@@ -34,32 +48,115 @@ import TitleRibbon from '../components/TitleRibbon.vue'
 </template>
 
 <style scoped>
-.slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
-.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
-.left-title-wrap, .right-title-wrap { position: absolute; z-index: 3; top: 16%; width: 46%; min-height: 8.8%; --ribbon-min-height: clamp(58px, 7.5vh, 90px); --ribbon-padding-x: 1.8rem; }
-.left-title-wrap { left: 0%; }
-.right-title-wrap { right: 0%; }
-.left-content, .right-content { position: absolute; z-index: 2; top: 30.2%; width: 40%; height: 56%; color: #233763 !important; font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif); }
-.left-content { left: 6.5%; }
-.right-content { left: 53.5%; }
-
-.column-fit :deep(*) { color: #233763 !important; }
-.column-fit :deep(p) { margin: 0 0 0.75rem 0; }
-.column-fit :deep(strong) { font-weight: 900; }
+.slide-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.left-title-wrap,
+.right-title-wrap {
+  position: absolute;
+  z-index: 3;
+  top: 16%;
+  width: 46%;
+  min-height: 8.8%;
+}
+
+.left-title-wrap {
+  left: 0%;
+}
+
+.right-title-wrap {
+  right: 0%;
+}
+
+.left-content,
+.right-content {
+  position: absolute;
+  z-index: 2;
+  top: 30.2%;
+  width: 40%;
+  height: 56%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.left-content {
+  left: 6.5%;
+}
+
+.right-content {
+  left: 53.5%;
+}
+
+.column-fit :deep(*) {
+  color: #233763 !important;
+}
+
+.column-fit :deep(p) {
+  margin: 0 0 0.75rem 0;
+}
+
+.column-fit :deep(strong) {
+  font-weight: 900;
+}
+
 .column-fit :deep(ul),
 .column-fit :deep(ol) {
   list-style-position: outside !important;
   margin: 0 0 0.75rem 0;
   padding-left: 1.65rem;
 }
-.column-fit :deep(ul) { list-style-type: disc !important; }
-.column-fit :deep(ol) { list-style-type: decimal !important; }
-.column-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
-.column-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
-.column-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
-.column-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
-.column-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
-.column-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
-.column-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
-
-</style>
+
+.column-fit :deep(ul) {
+  list-style-type: disc !important;
+}
+
+.column-fit :deep(ol) {
+  list-style-type: decimal !important;
+}
+
+.column-fit :deep(ol[type='a']) {
+  list-style-type: lower-alpha !important;
+}
+
+.column-fit :deep(ol[type='A']) {
+  list-style-type: upper-alpha !important;
+}
+
+.column-fit :deep(ol[type='i']) {
+  list-style-type: lower-roman !important;
+}
+
+.column-fit :deep(ol[type='I']) {
+  list-style-type: upper-roman !important;
+}
+
+.column-fit :deep(li) {
+  display: list-item !important;
+  margin-bottom: 0.46rem;
+  padding-left: 0.15rem;
+}
+
+.column-fit :deep(li::marker) {
+  color: #233763 !important;
+  font-weight: 900;
+}
+
+.column-fit :deep(pre) {
+  font-size: 0.58em;
+  line-height: 1.22;
+}
+</style>