diff --git a/packages/ffe-lists/less/regular-lists.less b/packages/ffe-lists/less/regular-lists.less index 7c5fd14d11..ff0261b2ea 100644 --- a/packages/ffe-lists/less/regular-lists.less +++ b/packages/ffe-lists/less/regular-lists.less @@ -111,13 +111,6 @@ text-align: left; margin: 0 0 @ffe-spacing-sm; list-style: none; - - > .ffe-stylized-numbered-list__item { - margin-top: @ffe-spacing-sm; - margin-left: @ffe-spacing-lg; - position: relative; - line-height: 1.5em; - } } .ffe-check-list__item { @@ -163,19 +156,28 @@ } } -.ffe-stylized-numbered-list { - > .ffe-stylized-numbered-list__item { - counter-increment: list-elements; - - &::before { - content: counter(list-elements); - display: block; - position: absolute; - left: -1.8em; - top: 0.05em; - font-size: 1.1em; - color: var(--ffe-v-lists-title-color); - &:extend(.ffe-strong-text); - } +.ffe-stylized-numbered-list__item { + --line-height: 1.5em; + + counter-increment: list-elements; + margin-top: @ffe-spacing-sm; + position: relative; + line-height: var(--line-height); + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: var(--line-height) 1fr; + grid-column-gap: @ffe-spacing-md; + + &::before { + content: counter(list-elements); + grid-column: 1/2; + grid-row: 1/2; + color: var(--ffe-v-lists-title-color); + &:extend(.ffe-strong-text); } } + +.ffe-stylized-numbered-list__item-content { + grid-column: 2/3; + grid-row: 1/-1; +}