2024-08-27 13:52:03 +02:00
|
|
|
:root
|
|
|
|
|
{
|
|
|
|
|
--separacion: 1rem;
|
|
|
|
|
--contido-max: 60rem;
|
|
|
|
|
--destacado-max: 75rem;
|
|
|
|
|
--destacado: calc((var(--destacado-max) - var(--contido-max)) / 2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grella
|
|
|
|
|
{
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns:
|
|
|
|
|
[completo-start] minmax(var(--separacion), 1fr)
|
|
|
|
|
[destacado-start] minmax(0, var(--destacado))
|
|
|
|
|
[contido-start] min(100% - (var(--separacion) * 2), var(--contido-max)) [contido-end]
|
|
|
|
|
minmax(0, var(--destacado)) [destacado-end]
|
|
|
|
|
minmax(var(--separacion), 1fr) [completo-end]
|
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grella > :not(.destacado, .completo),
|
|
|
|
|
.completo > :not(.destacado, .completo)
|
|
|
|
|
{
|
|
|
|
|
grid-column: contido;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grella > .completo
|
|
|
|
|
{
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-column: completo;
|
|
|
|
|
grid-template-columns: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grella > .destacado,
|
|
|
|
|
.completo > .destacado
|
|
|
|
|
{
|
|
|
|
|
grid-column: destacado;
|
|
|
|
|
}
|
