: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;
}