/* Ajustes de la rejilla del hero. * * El CSS de `.layout-widget` lo inyecta ApostropheCMS en el ; aquí sólo * se corrige lo que el core no puede saber del diseño Webstudio: cuando las * columnas se apilan (≤991px) el hero original separa los bloques con 40px * (.c1918m46), no con los 80px de separación entre columnas. */ @media all and (max-width: 991px) { /* Se sobrescribe `gap`, no `--grid-gap`: la variable la fija el propio * elemento en su atributo style y una regla de hoja de estilos nunca le * gana. Con la clase extra del hero sí superamos en especificidad a la * regla `.layout-widget` que inyecta el core. */ .layout-widget.hero-widget { gap: 40px; /* Apilado, el contenedor original centraba sus bloques (.c120bce5). Se * sobrescribe `justify-items` por el mismo motivo que `gap`: el valor * viaja en el atributo style del elemento. */ justify-items: center; } } /* La imagen del hero vive en un contenedor flex heredado del diseño original * (.c1v5mo2b). Allí era un flex item con ancho de sobra; dentro de la rejilla * su columna es más estrecha y, sin `min-width: 0`, el bloque conserva el * ancho intrínseco del PNG (2056px) y desborda la columna. */ .hero-widget .c1v5mo2b > * { min-width: 0; } /* Las columnas se declaran como contenedores flex verticales. Es lo que hacía * el diseño original, y además evita que el espacio en blanco que el * componente de área emite tras cada widget genere una caja de línea anónima: * en un contenedor flex el texto en blanco no produce ítem, en uno de bloque * estira la columna ~20px. */ .layout-widget.hero-widget > div { display: flex; flex-direction: column; } /* Un bloque que ocupa él solo su columna la rellena a lo alto. En el diseño * original ese bloque —la imagen del hero de home— era un flex item de la fila * y se estiraba a la altura de la columna de texto; convertido en hijo único * de un contenedor flex vertical dejaría 22px sin cubrir. Las columnas con * varios bloques no se tocan: ahí cada uno conserva su altura. */ .layout-widget.hero-widget > div > :only-child { flex-grow: 1; }