/* ========================================================================== MOIRE - /collections -------------------------------------------------------------------------- Medidas sacadas del frame "Collection" (1:20, 1920x4426) de Figma y de los tres hijos que cubre esta hoja: Fondo Home 1:23 y=236 1920x1024 la foto del hero THE FEAST... 1:26 y=1179 1920x231 el titular Frame 1 361:3007 y=1260 1920x896 el bloque del parrafo COMO SE APILAN LAS TRES PIEZAS Esto es lo que no se ve leyendo cada nodo por separado, y es la unica parte dificil de la pagina: 236 +---------------------------+ | | | la foto | | | 1233 | ### EL TITULAR ### | <- las mayusculas EMPIEZAN aqui, 1260 +---------------------------+ todavia sobre la fotografia | ################### | <- y aqui acaba la foto y empieza 1355 | | el burdeos, A HUESO: ni hueco | | ni solape entre las dos | el parrafo | 2156 +---------------------------+ De donde salen las tres respuestas que uno se hace al mirar el diseno: 1. EL TITULAR NO TIENE FONDO PROPIO NI ES UN BLOQUE APARTE. En Figma es un nodo de texto suelto, sin relleno, colocado encima de los otros dos. El burdeos que se ve detras de el es el del bloque del parrafo. 2. NO HAY SEPARACION entre la foto y el titular: hay SOLAPE. A 163px de cuerpo las mayusculas miden 122px de alto, y 27 de esos 122 quedan sobre la fotografia; los 95 restantes, sobre el burdeos. El titular cabalga la costura a proposito. Entre el titular y el parrafo hay unos 50px, que aqui no se escriben como un hueco: salen solos del aire que sobra dentro de la caja del titular (ver line-height). 3. LA FOTO Y EL BURDEOS SE TOCAN A HUESO. La foto acaba en 1260 y el bloque burdeos empieza en 1260. Comprobado leyendo los pixeles del render del diseno, no solo las coordenadas de los nodos. UNA COSA DEL DISENO QUE NO SE REPRODUCE En Figma hay 26px de blanco entre la cabecera (0-210) y la foto (236). No se implementan: 26 no sale de ningun sitio -no es un paso de la escala de espaciado de base.css ni se deduce de nada- y la cabecera ya trae sus propios 26px de aire por debajo del logo dentro de sus 210 de alto. Todo apunta a un empujon a ojo sobre el lienzo y no a una decision de composicion, asi que la foto arranca pegada a la cabecera. ========================================================================== */ /* --- El hero ------------------------------------------------------------- A sangre: ocupa el ancho entero de la ventana, sin el margen lateral de .contenedor. width:100% Y NO solo el max-width:100% que ya trae base.css: con max-width la foto se quedaria clavada en sus 1920px nativos y en un monitor mas ancho dejaria dos franjas blancas a los lados. Con width se estira. height:auto es lo que hace que valgan de algo los atributos width/height del marcado: el navegador saca de ellos la proporcion 1920/1024, reserva el hueco antes de descargar el fichero y la pagina no da el salto al llegar la imagen. Si aqui se pusiera un alto fijo, la foto se deformaria en cuanto la ventana no fuera de 1,875:1. */ .col-hero { width: 100%; height: auto; } /* --- El bloque burdeos: titular + parrafo --------------------------------- POR QUE ESTO ES UN FLEX y no el flujo normal, que es lo que parece que pide (dos hijos, uno debajo del otro): El titular sube sobre la foto con un margin-top NEGATIVO. En flujo normal, el margen superior del primer hijo se fusiona con el del padre -el "colapso de margenes"- y quien acabaria subiendo seria la seccion entera: el burdeos treparia 81px por encima de la costura y le comeria una franja a la fotografia. Los hijos de un contenedor flex no colapsan margenes nunca, asi que sube solo el titular y el fondo se queda exactamente donde acaba la foto, que es lo que pide el diseno. Un padding-top o un overflow:hidden en el padre tambien romperian el colapso, pero el primero anadiria un hueco que hay que descontar a mano y el segundo recortaria el titular justo por donde se sale. */ .col-presenta { display: flex; flex-direction: column; background: var(--c-burdeos); /* Esto NO es el margen lateral del diseno, es solo una holgura para que el titular no llegue a besar el borde de la ventana: el ancho real del parrafo lo fija su max-width, mas abajo. Se queda corto a proposito (50px donde .contenedor pone 80) porque el titular ocupa casi todo el ancho -1724 de 1920 en el diseno- y con los 80px de .contenedor se quedaria sin sitio y partiria en dos lineas a 1920. El minimo de 20px si es el mismo que el de .contenedor, para que en un movil el parrafo quede alineado con el resto del sitio. */ padding-inline: clamp(20px, 2.6vw, 50px); padding-bottom: clamp(40px, 5.2vw, 100px); /* 100px a 1920 */ /* Convierte esta seccion en contenedor de consulta para que el titular pueda medirse contra el ancho REAL de que dispone (ver mas abajo). */ container-type: inline-size; } .col-presenta__titulo { /* Va en vw y no en pixeles fijos porque la foto de encima tambien crece con la ventana: si el titular se quedara clavado, la composicion -que se sostiene sobre que el titular ocupe casi todo el ancho- se desharia en cuanto la pantalla pasara de 1920. Mismo criterio que .reveal__title de coming-soon.css. POR QUE cqi Y NO vw: porque vw NO descuenta la barra de scroll. Esa barra se lleva unos 15px fijos, que a 1920 son el 0,8% del ancho pero a 768 son el 2%. Un titular dimensionado en vw pide siempre el mismo porcentaje de un ancho que no tiene, y el error crece segun se estrecha la ventana: a 768 llegaba a quedarse a CUATRO pixeles de no caber. El primer intento fue bajar el cuerpo de 8.49vw a 8.2vw para comprar holgura. Funcionaba, pero pagando en todas las anchuras un problema que solo existia en las estrechas, y ademas por un motivo equivocado: se escribio que el navegador componia Neue Montreal un 3% mas ancha que Figma, y al medirlas las dos dan 1766px a 163 de cuerpo. Coinciden. cqi mide contra el ancho de contenido de .col-presenta, que ya viene sin barra de scroll y sin el padding lateral. Asi la proporcion del diseno se respeta a cualquier anchura y la holgura de 768 sale sola. El factor no es el 8.49 del diseno porque el ancho de referencia ya no es la ventana sino la caja de contenido: sale de medir, no de dividir. Los dos topes son los extremos donde la regla deja de tener sentido: por debajo de ~390px de ventana el texto se quedaria demasiado pequeno para ser un titular, y por encima de ~2730 empezaria a ser grotesco. */ font-size: clamp(2rem, 8.958cqi, 14rem); /* 231/163: el alto EXACTO de la caja del titular en el diseno, dividido por su cuerpo. Es bastante mayor que 1 y es intencionado: las mayusculas solo miden 122px dentro de una caja de 231, y ese aire que sobra por debajo es justo lo que separa el titular del parrafo. Por eso abajo no hay ningun margin-bottom: el hueco ya esta aqui dentro. Sin unidad, para que escale con el cuerpo. */ line-height: 1.417; font-weight: var(--peso-bold); color: var(--c-rojo); text-align: center; /* El diccionario guarda "The Feast of Excess" con la mayuscula inicial nada mas y el versalitado lo pone el CSS, mismo criterio que nav.css y footer.css: asi el texto del fichero de idioma se lee como una frase normal y un traductor no tiene que acordarse de respetar un mayusculado. */ text-transform: uppercase; /* LO QUE HACE QUE EL TITULAR CABALGUE LA FOTO. En el diseno su caja empieza 81px por encima de la costura (1179 contra 1260), y 81/163 = 0,497em. En em y NO en pixeles para que el solape encoja a la vez que la letra. Con un -81px fijo, en un movil donde el titular baja a 32px de cuerpo, el texto se meteria dos alturas y media dentro de la fotografia. */ margin-top: -0.497em; /* El titular se sale por arriba de su seccion y pisa la foto, asi que hay que garantizar que se pinta ENCIMA y no debajo. No es paranoia: un es un elemento reemplazado y se pinta en una capa POSTERIOR a los fondos de bloque, de modo que sin esto el orden entre la foto y el texto queda en manos del navegador. */ position: relative; z-index: 1; } .col-presenta__texto { /* El bloque de texto mide 1737px en el diseno, centrado en 1920, o sea 91,5px por lado. No se escribe como margen sino como tope de ancho, que es lo mismo a 1920 y se comporta mucho mejor por debajo: en cuanto la ventana se estrecha manda el padding de la seccion y el parrafo se va estrechando con ella en vez de mantener un margen fijo que acabaria dejandolo en una columna de tres palabras. */ width: 100%; max-width: 1737px; margin-inline: auto; font-size: clamp(1.25rem, 3.75vw, 72px); /* 72px a 1920 */ font-weight: var(--peso-regular); color: var(--c-crema); letter-spacing: 0.09em; /* 6,48px sobre 72px */ /* Interlineado de lectura normal: es el de MOVIL. El cerrado del diseno se aplica mas abajo, a partir de 768. Ver el porque alli. */ line-height: 1.2; /* Del diseno, que trae word-break:break-word. Se escribe con overflow-wrap, que es la propiedad estandar equivalente: el word-break:break-word original nunca llego a ser estandar y se mantiene solo por compatibilidad. Hace falta de verdad, y en espanol mas: a 72px de cuerpo caben muy pocos caracteres por linea, y palabras como "reinterpreta" o "seduccion" pueden no entrar enteras en el hueco que queda. Sin esto la palabra se saldria del bloque en vez de partirse. */ overflow-wrap: break-word; } /* --- De tablet hacia arriba ---------------------------------------------- El interlineado cerrado del diseno (70px sobre 72px de cuerpo, 0,972) es un efecto de TIPOGRAFIA GRANDE: a ese tamano las lineas casi se tocan y el parrafo se lee como un bloque compacto, que es lo que se busca. A tamano de movil deja de ser un efecto y pasa a ser un defecto: el mismo parrafo baja a 20px, las nueve lineas se apelmazan y las ascendentes de una linea se rozan con las descendentes de la de arriba. Por eso el valor del diseno solo entra a partir de 768, donde el cuerpo ya anda por 29px, y por debajo se usa el interlineado de lectura normal que esta en la regla base. El corte en 768 es el mismo que usan nav.css y footer.css, y el sentido de la consulta (min-width) tambien: el proyecto se escribe de movil hacia arriba. */ @media (min-width: 768px) { .col-presenta__texto { line-height: 0.972; /* 70/72 del diseno */ } } /* --- La reticula --------------------------------------------------------- Medidas del contenedor en el diseno (361:3314, leidas de su codigo, no a ojo): padding 40px 80px column-gap 32px row-gap 48px <- distinto del horizontal, a proposito 3 columnas Y las cuentas cierran exactas a 1920, que es lo que confirma que son valores queridos y no arrastres del raton: 1920 = 80 + (565,33 x 3) + (32 x 2) + 80 POR QUE minmax(0, 1fr) Y NO 1fr A SECAS, que es lo que uno escribe primero: el tamano minimo por defecto de una pista de grid es "auto", o sea el contenido, asi que una foto o una palabra larga pueden empujar la columna por encima de su parte y sacar la reticula de la pantalla. El 0 le dice que puede encogerse por debajo del contenido, y a partir de ahi manda el max-width:100% de las imagenes. EL PADDING LATERAL es la misma formula que .contenedor de base.css y no los 80px pelados del diseno: con 80 fijos, un movil de 375 se quedaria con 215 de contenido. Se repite la formula en vez de reutilizar la clase porque esta seccion no lleva .contenedor -no comparte con el las lineas de texto- y tener el numero en dos sitios es menos malo que una clase que signifique dos cosas. LOS SALTOS VAN EN min-width, de movil hacia arriba, que es como se escribe el resto del proyecto (ver nav.css, footer.css y el bloque de .col-presenta__texto de mas arriba). Movil y tablet de esta pagina NO estan disenados: el numero de columnas sale de la tabla del apartado 9 de la especificacion. Se quita una columna antes que encoger la tarjeta, porque una tarjeta de 180px con un nombre a 42px no se lee. */ .col-reticula { display: grid; grid-template-columns: minmax(0, 1fr); /* movil: una sola columna */ column-gap: var(--medianil-x); /* En una sola columna las tarjetas van una detras de otra y el medianil vertical del diseno -pensado para separar DOS filas de tres- deja un hueco desproporcionado. Vuelve a los 48 en cuanto hay filas de verdad. */ row-gap: var(--paso-5); max-width: var(--ancho-maximo); margin-inline: auto; padding: var(--paso-5) clamp(20px, 4.2vw, var(--margen-pagina)); } /* La tarjeta ENTERA es el enlace (ver collections.php), asi que este es la caja: flex en columna con la foto arriba y el texto abajo. container-type convierte cada tarjeta en contenedor de consulta para que el nombre y el formato se midan contra el ancho REAL de su columna. Ver el porque en .tarjeta__nombre. */ .tarjeta { display: flex; flex-direction: column; gap: var(--paso-5); /* 40px entre la foto y el texto */ padding: var(--paso-3) 0; /* el lateral llega a partir de 768 */ border-radius: 12px; /* del diseno; lo usa el foco del teclado */ container-type: inline-size; /* El aplazamiento de las tarjetas fuera de pantalla NO va aqui: vive en su propio bloque, al final del fichero, porque solo tiene sentido donde hay raton. Ver "Aplazamiento" mas abajo. */ } /* --- La foto ------------------------------------------------------------- La proporcion del diseno, que NO es cuadrada: 1105/1581 = 0,699, bien vertical. Coincide al pixel con los ficheros que sirve el sitio (1105x1581 los seis), asi que el hueco y la foto encajan sin sobra. El hueco se declara aqui de todas formas, y no se deja que lo ponga la imagen, porque es lo que mantiene las seis tarjetas de una fila alineadas entre si: el dia que entre una foto con otra proporcion, la reticula seguira cuadrada en vez de descolocarse una columna entera. object-fit:contain Y NO cover, que es lo que suele ponerse: con la proporcion actual las dos hacen exactamente lo mismo (el hueco y la foto coinciden), pero se comportan al reves cuando dejan de coincidir. cover RECORTA en silencio, y en una foto de producto eso significa cortarle el tapon al frasco sin que nadie se entere; contain deja aire, y el aire no se ve porque estas fotos llevan el fondo transparente. Ante la duda, que se vea el frasco entero. */ .tarjeta__foto { aspect-ratio: 1105 / 1581; overflow: hidden; /* El ancla del ::after del roll over, que va posicionado a inset:0. Sin esto se colocaria contra el ancestro posicionado mas cercano -o contra la ventana- y la foto de ambiente saldria estirada por media pagina. Es la unica razon por la que esta aqui: la foto no se mueve. */ position: relative; } /* EL AIRE ALREDEDOR DEL FRASCO (29/09/2026). Lo pidio el responsable: los frascos se veian demasiado grandes y pegados al borde. No es una impresion suya -se midio-: en los seis ficheros el frasco ocupa entre el 96,9% y el 100% del encuadre, o sea que las fotografias no traen ningun margen y el frasco llegaba de lado a lado de su hueco. VA COMO padding DE LA IMAGEN Y NO COMO TAMANO DE LA CAJA, y esa diferencia es todo el encargo: la caja tiene que seguir midiendo lo mismo. De ella cuelga el ::after del roll over -la toma de ambiente, que va a inset:0- y el responsable dijo expresamente que esas se ven bien de tamano. Encogiendo la caja encogerian las dos; encogiendo solo la imagen, el frasco se retira del borde y el ambiente sigue llenando la tarjeta. Y TAMPOCO CAMBIA EL ALTO DE LA RETICULA: la caja conserva su aspect-ratio, asi que las seis tarjetas siguen alineadas entre si. EL 8% ES DEL ANCHO, TAMBIEN ARRIBA Y ABAJO: un padding en porcentaje se resuelve siempre contra el ancho del contenedor, en los cuatro lados. Es lo que se quiere aqui -un marco parejo- y conviene saberlo porque es la regla de CSS que mas sorprende. A 1440 son 28px por lado sobre un hueco de 354, y el frasco pasa de 354 de ancho a 298. Es UN numero: si marca lo quiere mas o menos apretado, se sube o se baja y no hay nada mas que tocar. */ .tarjeta__foto img { width: 100%; height: 100%; padding: 8%; object-fit: contain; } /* --- El roll over: al pasar el raton, la toma de ambiente ---------------- Decision del responsable del 15/09/2026, que REVIERTE la del 10/09/2026 ("las tarjetas no tienen hover: una sola imagen"). El frasco se cambia por la toma de ambiente DE LA MISMA FRAGANCIA -en el diseno las seis apuntaban a la de Cherry on Top, y eso si era un descuido-. ES UN FONDO EN UN ::after Y NO UN SEGUNDO , y el motivo es el peso. Una segunda en el marcado se la bajan TAMBIEN los moviles, que no tienen raton y no van a ver el efecto ni una vez: 472 KB de datos de alguien tirados en algo que no puede ocurrir en su pantalla. Una imagen de fondo declarada dentro de una consulta que NO CASA no se descarga, asi que en un tactil esto cuesta exactamente cero bytes. La URL de cada tarjeta llega en --foto-ambiente, una propiedad personalizada en linea (ver collections.php). Que viaje en el HTML de todos los dispositivos no cuesta nada: una propiedad personalizada es texto para el navegador, no una URL, y no dispara ninguna peticion hasta que alguien la usa en un background-image. Aqui eso solo pasa dentro de este @media. SE DECLARA SIEMPRE, con opacity 0, Y NO DENTRO DEL :hover. Metida en el :hover, la descarga arrancaria al llegar el raton y la primera pasada por cada tarjeta se veria en blanco o a medias. Con opacity 0 el elemento se pinta igual -transparente, pero se pinta-, asi que el navegador ya tiene la foto cuando hace falta y el fundido sale limpio desde la primera vez. :focus-visible ADEMAS de :hover. La tarjeta entera es un y recibe foco, asi que quien navega con teclado tiene que ver lo mismo que quien trae raton. En :focus-visible y no en :focus para que no salte tambien al hacer clic, que es justo cuando la tarjeta esta a punto de irse. Y NO HAY BLOQUE prefers-reduced-motion AQUI a proposito: el de base.css ya deja la transicion en 0,01ms para todo, incluidos los ::after, asi que quien pide menos movimiento ve el cambio de foto directo, sin fundido. Repetirlo aqui seria una segunda copia de la misma regla que habria que acordarse de mantener. background-size: cover Y NO contain, AL REVES QUE EL FRASCO de aqui arriba, y no es un descuido. Las seis tomas de ambiente van de 0,558 a 0,800 de proporcion contra el 0,699 del hueco: con contain cada tarjeta dejaria una franja de fondo de hasta el 20%, y de distinto tamano en cada una. El argumento que decidio alli -que recortar le corta el tapon al frasco- aqui no aplica: son tomas de ambiente, no fotos de producto. Centrado para las seis; el dia que alguna pida otro encuadre se le pone su background-position, que es una linea y por fragancia. */ @media (hover: hover) { .tarjeta__foto::after { content: ""; position: absolute; inset: 0; /* Dos veces, y en este orden. Safari 16 no conoce image-set() sin prefijo: descarta la segunda al analizarla y se queda con la primera. Los navegadores actuales entienden las dos y gana la ultima. Sin el respaldo, en Safari 16 el ::after existe pero transparente: la tarjeta no reacciona al raton y no hay ni error en consola ni hueco visible. */ background-image: -webkit-image-set(var(--amb-1x) 1x, var(--amb-2x) 2x); background-image: image-set(var(--amb-1x) 1x, var(--amb-2x) 2x); background-size: cover; background-position: center; opacity: 0; transition: opacity 0.35s ease; } .tarjeta:hover .tarjeta__foto::after, .tarjeta:focus-visible .tarjeta__foto::after { opacity: 1; } } .tarjeta__texto { display: flex; flex-direction: column; gap: var(--paso-3); } /* --- El nombre de la fragancia ------------------------------------------- 42px Bold en "Rancid Red" sobre el blanco de la pagina: 4,57:1 de contraste. Pasa el AA de WCAG, que para texto grande (>=24px, o >=18,66 en negrita) pide 3:1, y lo pasa tambien con el minimo de 28px de movil. Contra el 4,5:1 de texto normal iria justisimo, asi que este color NO se puede reutilizar para texto pequeno sin volver a hacer la cuenta. EL CUERPO VA EN cqi, no en pixeles fijos ni en vw: - Fijo en 42px se desborda por debajo de 1500. La columna encoge con la ventana pero la letra no, y "BAKE MY CHERRY" -el nombre mas largo de las seis- parte en dos lineas mientras las otras cinco siguen en una, descuadrando la fila entera. - En vw tampoco, y por lo mismo que el titular (ver arriba): vw no descuenta la barra de scroll. cqi mide contra el ancho de contenido de la tarjeta, que es justo la medida de la que el nombre tiene que caber. 42/505,33 = 8,311%, o sea que a 1920 esto vale 42px EXACTOS y por debajo mantiene la proporcion del diseno en vez de romperla. El suelo de 28px es donde un nombre deja de leerse como titulo de producto; por debajo de el ya no cabe en una tarjeta de movil. */ .tarjeta__nombre { font-size: clamp(28px, 8.311cqi, 42px); line-height: 0.905; /* 38/42 del diseno, sin unidad para que escale */ font-weight: var(--peso-bold); color: var(--c-rojo); } /* 22px sobre los 505,33 de la tarjeta son 4,353%; el suelo de 18px es el mismo criterio que arriba. El tracking va en em (1,98/22 = 0,09em) y no en pixeles, que es como lo escriben ya nav.css y footer.css: en pixeles habria que corregirlo a mano en cada tamano de letra. */ .tarjeta__formato { font-size: clamp(18px, 4.353cqi, 22px); line-height: 1.136; /* 25/22 del diseno */ font-weight: var(--peso-regular); letter-spacing: 0.09em; color: var(--c-negro); } /* --- De tablet hacia arriba: dos columnas -------------------------------- */ @media (min-width: 768px) { .col-reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--medianil-y); /* ya hay filas: vuelven los 48 del diseno */ } /* Los 30px de aire lateral del diseno. En movil no estan porque la tarjeta ocupa el ancho entero y sumarian a los 20px de la seccion: la foto se quedaria con 50px menos por gusto. */ .tarjeta { padding-inline: var(--paso-4); } } /* --- Escritorio: las tres columnas del diseno ---------------------------- */ @media (min-width: 1200px) { .col-reticula { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- Aplazamiento de las tarjetas fuera de pantalla ----------------------- El roll over declara su foto de ambiente como fondo del ::after, siempre y con opacidad cero, para que no parpadee la primera vez que llega el raton. El precio es que un fondo CSS no admite loading="lazy": las seis entraban con la carga de la pagina, 472 KB, aunque la reticula esta 1024px POR DEBAJO del pliegue. Justo lo que el commit de las tarjetas habia evitado difiriendo las seis fotos de frasco para no quitarle ancho de banda al hero. content-visibility:auto lo arregla: el navegador se salta el pintado de las tarjetas que estan fuera de pantalla, y con el pintado se salta la descarga de sus fondos. Medido, a 1920x700: sin el, 6 peticiones y 473 KB antes de que el visitante baje; con el, ninguna. POR QUE DENTRO DE (hover: hover) Y NO SUELTO, que es como estaba: lo unico que hay que aplazar es ese ::after, y el ::after solo existe donde hay raton -en un tactil computa content:none y background-image: none-. Aplicado a todos, un movil no se ahorraba ni un byte y pagaba igual el error de la reserva de altura. Y los anchos donde ese error es peor son precisamente los tactiles. LA RESERVA VA EN calc Y NO EN UN NUMERO FIJO. Antes ponia 838px, que es la caja de contenido a 1920. Pero el alto de la tarjeta lo manda el ancho de su columna, porque la foto tiene proporcion fija, y ese ancho cambia con el numero de columnas. Medido con el numero fijo: ancho alto real reservaba error del documento 375 625 878 +1518 px (30% mas largo) 767 1168 878 -1742 px (20% mas CORTO) 768 530 878 +1045 px (35% mas largo) 1200 547 878 +663 px 1920 878 878 0 El caso de 767 es el malo: reservar de menos hace que el documento CREZCA segun se baja, o sea que el final se aleja mientras te acercas a el, y el pulgar de la barra miente. Reservar de mas solo encoge la pagina, que molesta menos. Las tres cuentas de abajo son las mismas que el atributo sizes del marcado -padding de la reticula, medianil y padding de la tarjeta- por 1,43077, que es 1581/1105, la proporcion de la foto invertida; mas 122px del hueco entre foto y texto (40) y del bloque de texto (82). El 'auto' de delante sigue diciendo al navegador que, en cuanto haya pintado la tarjeta una vez, use el alto real y se olvide de la cuenta. */ @media (hover: hover) { .tarjeta { content-visibility: auto; /* una columna: la tarjeta ocupa el ancho de la reticula, sin padding lateral propio (llega a partir de 768) */ contain-intrinsic-size: auto calc( (100vw - (2 * clamp(20px, 4.2vw, 80px))) * 1.43077 + 122px); } } @media (hover: hover) and (min-width: 768px) { .tarjeta { /* dos columnas, un medianil de 32 y ya con los 30 de padding por lado */ contain-intrinsic-size: auto calc( ((100vw - (2 * clamp(20px, 4.2vw, 80px)) - 32px) / 2 - 60px) * 1.43077 + 122px); } } @media (hover: hover) and (min-width: 1200px) { .tarjeta { /* tres columnas, dos medianiles, y el tope de 1920 de la reticula */ contain-intrinsic-size: auto calc( ((min(100vw, 1920px) - (2 * clamp(20px, 4.2vw, 80px)) - 64px) / 3 - 60px) * 1.43077 + 122px); } }