diff --git a/hugo/assets/css/main.css b/hugo/assets/css/main.css
index 799782e..2dcd58b 100644
--- a/hugo/assets/css/main.css
+++ b/hugo/assets/css/main.css
@@ -1 +1 @@
-.chroma{--sh-background-background: var(--light, #fafafa) var(--dark, #101010);--sh-background-color: var(--light, #101010) var(--dark, #fafafa);--sh-comment: #75715e;--sh-error-background: #1e0010;--sh-error-color: #960050;--sh-generic-deleted-color: var(--light, inherit) var(--dark, #f92672);--sh-generic-inserted-color: var(--light, inherit) var(--dark, #a6e22e);--sh-generic-subheading-color: var(--light, inherit) var(--dark, #75715e);--sh-keyword-color: var(--light, #00a8c8) var(--dark, #66d9ef);--sh-keyword-constant-color: var(--sh-keyword-color);--sh-keyword-declaration-color: var(--sh-keyword-color);--sh-keyword-namespace-color: #f92672;--sh-keyword-pseudo-color: var(--sh-keyword-color);--sh-keyword-reserved-color: var(--sh-keyword-color);--sh-keyword-type-color: var(--sh-keyword-color);--sh-line-highlight-background: #ffc;--sh-line-numbers-color: #7f7f7f;--sh-literal-color: #ae81ff;--sh-literal-date-color: var(--light, #d88200) var(--dark, #e6db74);--sh-literal-number-bin-color: var(--sh-literal-color);--sh-literal-number-color: var(--sh-literal-color);--sh-literal-number-float-color: var(--sh-literal-color);--sh-literal-number-hex-color: var(--sh-literal-color);--sh-literal-number-integer-color: var(--sh-literal-color);--sh-literal-number-integer-long-color: var(--sh-literal-color);--sh-literal-number-oct-color: var(--sh-literal-color);--sh-literal-string-affix-color: var(--sh-literal-date-color);--sh-literal-string-backtick-color: var(--sh-literal-date-color);--sh-literal-string-char-color: var(--sh-literal-date-color);--sh-literal-string-color: var(--sh-literal-date-color);--sh-literal-string-delimiter-color: var(--sh-literal-date-color);--sh-literal-string-doc-color: var(--sh-literal-date-color);--sh-literal-string-double-color: var(--sh-literal-date-color);--sh-literal-string-escape-color: var(--sh-literal-color);--sh-literal-string-heredoc-color: var(--sh-literal-date-color);--sh-literal-string-interpol-color: var(--sh-literal-date-color);--sh-literal-string-other-color: var(--sh-literal-date-color);--sh-literal-string-regex-color: var(--sh-literal-date-color);--sh-literal-string-single-color: var(--sh-literal-date-color);--sh-literal-string-symbol-color: var(--sh-literal-date-color);--sh-name-attribute-color: var(--light, #75af00) var(--dark, #a6e22e);--sh-name-builtin-color: var(--sh-name-color);--sh-name-builtin-pseudo-color: var(--sh-name-color);--sh-name-class-color: var(--sh-name-attribute-color);--sh-name-color: var(--light, #111) var(--dark, inherit);--sh-name-constant-color: var(--light, #00a8c8) var(--dark, #66d9ef);--sh-name-decorator-color: var(--sh-name-attribute-color);--sh-name-entity-color: var(--sh-name-color);--sh-name-exception-color: var(--sh-name-attribute-color);--sh-name-function-color: var(--sh-name-attribute-color);--sh-name-function-magic-color: var(--sh-name-color);--sh-name-label-color: var(--sh-name-color);--sh-name-namespace-color: var(--sh-name-color);--sh-name-other-color: var(--sh-name-attribute-color);--sh-name-property-color: var(--sh-name-color);--sh-name-tag-color: var(--sh-keyword-namespace-color);--sh-name-variable-class-color: var(--sh-name-color);--sh-name-variable-color: var(--sh-name-color);--sh-name-variable-global-color: var(--sh-name-color);--sh-name-variable-instance-color: var(--sh-name-color);--sh-name-variable-magic-color: var(--sh-name-color);--sh-operator-color: var(--sh-keyword-namespace-color);--sh-operator-word-color: var(--sh-keyword-namespace-color);--sh-pre-wrapper-background: var(--light, #fafafa) var(--dark, #101010);--sh-pre-wrapper-color: var(--light, #101010) var(--dark, #fafafa);--sh-punctuation-color: var(--sh-name-color);color:var(--sh-pre-wrapper-color);background-color:var(--sh-pre-wrapper-background)}.bg{color:var(--sh-background-color);background-color:var(--sh-background-background)}.chroma .bp{color:var(--sh-name-builtin-pseudo-color)}.chroma .c{color:var(--sh-comment)}.chroma .c1{color:var(--sh-comment)}.chroma .ch{color:var(--sh-comment)}.chroma .cm{color:var(--sh-comment)}.chroma .cp{color:var(--sh-comment)}.chroma .cpf{color:var(--sh-comment)}.chroma .cs{color:var(--sh-comment)}.chroma .dl{color:var(--sh-literal-string-delimiter-colo)}.chroma .err{color:var(--sh-error-color);background-color:var(--sh-error-background)}.chroma .fm{color:var(--sh-name-function-magic-color)}.chroma .gd{color:var(--sh-generic-deleted-color)}.chroma .ge{font-style:italic}.chroma .gi{color:var(--sh-generic-inserted-color)}.chroma .gs{font-weight:bold}.chroma .gu{color:var(--sh-generic-subheading-color)}.chroma .hl{background-color:var(--sh-line-highlight-background)}.chroma .il{color:var(--sh-literal-number-integer-long-color)}.chroma .k{color:var(--sh-keyword-color)}.chroma .kc{color:var(--sh-keyword-constant-color)}.chroma .kd{color:var(--sh-keyword-declaration-color)}.chroma .kn{color:var(--sh-keyword-namespace-color)}.chroma .kp{color:var(--sh-keyword-pseudo-color)}.chroma .kr{color:var(--sh-keyword-reserved-color)}.chroma .kt{color:var(--sh-keyword-type-color)}.chroma .l{color:var(--sh-literal-color)}.chroma .ld{color:var(--sh-literal-date-color)}.chroma .line{display:flex}.chroma .ln{white-space:pre;user-select:none;margin-right:.4em;padding:0 .4em;color:var(--sh-line-numbers-color)}.chroma .lnt{white-space:pre;user-select:none;margin-right:.4em;padding:0 .4em;color:var(--sh-line-numbers-color)}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .m{color:var(--sh-literal-number-color)}.chroma .mb{color:var(--sh-literal-number-bin-color)}.chroma .mf{color:var(--sh-literal-number-float-color)}.chroma .mh{color:var(--sh-literal-number-hex-color)}.chroma .mi{color:var(--sh-literal-number-integer-color)}.chroma .mo{color:var(--sh-literal-number-oct-color)}.chroma .n{color:var(--sh-name-color)}.chroma .na{color:var(--sh-name-attribute-color)}.chroma .nb{color:var(--sh-name-builtin-color)}.chroma .nc{color:var(--sh-name-class-color)}.chroma .nd{color:var(--sh-name-decorator-color)}.chroma .ne{color:var(--sh-name-exception-color)}.chroma .nf{color:var(--sh-name-function-color)}.chroma .ni{color:var(--sh-name-entity-color)}.chroma .nl{color:var(--sh-name-label-color)}.chroma .nn{color:var(--sh-name-namespace-color)}.chroma .no{color:var(--sh-name-constant-color)}.chroma .nt{color:var(--sh-name-tag-color)}.chroma .nv{color:var(--sh-name-variable-color)}.chroma .nx{color:var(--sh-name-other-color)}.chroma .o{color:var(--sh-operator-color)}.chroma .ow{color:var(--sh-operator-word-color)}.chroma .p{color:var(--sh-chroma-p-color)}.chroma .py{color:var(--sh-name-property-color)}.chroma .s{color:var(--sh-literal-string-color)}.chroma .s1{color:var(--sh-literal-string-single-color)}.chroma .s2{color:var(--sh-literal-string-double-color)}.chroma .sa{color:var(--sh-literal-string-affix-color)}.chroma .sb{color:var(--sh-literal-string-backtick-color)}.chroma .sc{color:var(--sh-literal-string-char-color)}.chroma .sd{color:var(--sh-literal-string-doc-color)}.chroma .se{color:var(--sh-literal-string-escape-color)}.chroma .sh{color:var(--sh-literal-string-heredoc-color)}.chroma .si{color:var(--sh-literal-string-interpol-color)}.chroma .sr{color:var(--sh-literal-string-regex-color)}.chroma .ss{color:var(--sh-literal-string-symbol-color)}.chroma .sx{color:var(--sh-literal-string-other-color)}.chroma .vc{color:var(--sh-name-variable-class-color)}.chroma .vg{color:var(--sh-name-variable-global-color)}.chroma .vi{color:var(--sh-name-variable-instance-color)}.chroma .vm{color:var(--sh-name-variable-magic-color)}.docs-grid{min-height:100vh;position:relative;display:grid;grid-template-columns:auto;grid-template-rows:56px auto;grid-template-areas:"navbar" "main"}@media(min-width: 800px){.docs-grid{grid-template-columns:240px auto;grid-template-areas:"navbar navbar" "sidebar main"}}.docs-home{min-height:100vh;position:relative;display:grid;grid-template-columns:auto;grid-template-rows:56px auto;grid-template-areas:"navbar" "main"}@media(min-width: 800px){.docs-home{grid-template-columns:auto;grid-template-areas:"navbar" "main"}}.docs-navbar{grid-area:navbar;position:sticky;top:0;z-index:1030}.docs-navigation .list .list-item{font-size:87.5%;border-radius:0;color:var(--grey-800) !important}.docs-navigation .list .list-item:hover{background-color:var(--accent-50) !important;color:var(--accent-800) !important}.docs-navigation .list .list-item:hover.active,.docs-navigation .list .list-item.active{background-color:var(--accent-100) !important;color:var(--accent-800) !important}.docs-footer{grid-area:footer;border-top:1px solid var(--grey-300);background-color:var(--light, #f3f4f4) var(--dark, #111214)}.docs-page{display:flex;flex-direction:column}.docs-main{flex-grow:1;display:grid;max-width:100vw;gap:2rem;grid-area:main;margin:0 auto;padding:36px;grid-template-columns:100%;grid-template-rows:auto auto auto;grid-template-areas:"meta" "toc" "article"}@media(min-width: 1000px){.docs-main{grid-template-columns:auto 200px;grid-template-rows:max-content auto;grid-template-areas:"meta toc" "article toc"}}@media(min-width: 1400px){.docs-main{grid-template-columns:840px 200px}}.docs-main .docs-main-meta{grid-area:meta;width:100%}.docs-main .docs-main-toc{grid-area:toc}.docs-main .docs-main-toc .docs-toc{position:sticky;top:96px}.docs-main .docs-main-content{grid-area:article}@media(min-width: 800px){.docs-sidebar{grid-area:sidebar;position:sticky;top:56px;border-right:1px solid var(--grey-300);height:calc(100vh - 56px);z-index:1020}.docs-sidebar .offcanvas-body{overflow:auto;height:calc(100vh - 56px)}}.docs-toc{position:sticky;top:1rem;height:subtract(100vh, 59px);overflow-y:auto}.docs-toc nav{font-size:.875rem}.docs-toc nav ul{padding-left:0;list-style:none}.docs-toc nav ul ul{padding-left:1.25rem}.docs-toc nav a{display:inline-flex;text-decoration:none;padding:.25rem .5rem;margin-bottom:.125rem;border-radius:.25rem;color:var(--grey-800);font-size:.875rem}.docs-toc nav a:hover{background-color:var(--accent-200);color:inherit}.docs-toc nav a code{margin-right:3px;font:inherit}.docs-content>h2:not(:first-child){margin-top:3rem}.docs-content>h3:not(:first-child){margin-top:2.5rem}.docs-content p,.docs-content li{line-height:1.5}.docs-example{border:1px solid var(--grey-300);border-radius:.5rem;margin-bottom:1rem;width:100%}.docs-example .docs-preview{padding:1.5rem;margin:0}.docs-example .docs-preview:not(:last-child){border-bottom:1px solid var(--grey-300)}.docs-example .docs-preview>:last-child{margin-bottom:0}.docs-example .docs-preview .nav+.nav,.docs-example .docs-preview progress+progress,.docs-example .docs-preview progress+.progress,.docs-example .docs-preview .progress+progress,.docs-example .docs-preview .progress+.progress{margin-top:1rem}.docs-example .docs-preview.docs-colors-preview .color{border-radius:.4rem;background:var(--color-600);color:var(--color-text);overflow:hidden;position:relative}.docs-example .docs-preview.docs-colors-preview .color h5{padding:1rem;margin-bottom:1rem}.docs-example .docs-preview.docs-colors-preview .color .label{position:absolute;right:1rem;bottom:2rem;transform:translateY(50%)}.docs-example .docs-preview.docs-colors-preview .color .color-swatch{width:100%;background:var(--color-800);padding:1rem}.docs-example .docs-preview.docs-bg-colors-preview.grid>div{border-radius:.4rem;padding:1rem}.docs-example .docs-preview.docs-preview-sizing-rows>div{display:flex;align-items:center}.docs-example .docs-preview.docs-preview-sizing-rows>div:not(:last-child){margin-bottom:.5rem}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:first-child{width:6rem;flex-shrink:0}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:last-child{flex-grow:1}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:last-child>div{background-color:var(--accent-600);border-radius:.4rem;padding-top:1rem;padding-bottom:1rem;color:#fff}.docs-example .docs-preview.docs-preview-sizing-columns{display:flex}.docs-example .docs-preview.docs-preview-sizing-columns>div{display:flex;flex-direction:column;align-items:center}.docs-example .docs-preview.docs-preview-sizing-columns>div:not(:last-child){margin-right:.5rem}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:first-child{width:6rem;flex-shrink:0;text-align:center;margin-bottom:.5rem}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:last-child{flex-grow:1;width:100%}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:last-child>div{background-color:var(--accent-600);border-radius:.4rem;padding-left:1rem;padding-right:1rem;color:#fff}.docs-example .docs-preview.docs-preview-img{background-image:url("/img/background.png");background-size:cover;background-position:center bottom;height:250px;width:100%;position:relative}.docs-example .docs-preview.docs-preview-grid .grid{border-radius:.5rem;background-image:linear-gradient(45deg, rgba(0, 123, 255, 0.4) 10%, transparent 0, transparent 50%, rgba(0, 123, 255, 0.4) 0, rgba(0, 123, 255, 0.4) 60%, transparent 0, transparent);background-size:6px 6px}.docs-example .docs-preview.docs-preview-grid .grid>*{padding:.75rem 0;background:rgba(0,123,255,.1);border:1px solid #007bff;text-align:center;border-radius:.5rem;backdrop-filter:blur(2px)}.docs-example .docs-preview.docs-preview-flex .d-flex,.docs-example .docs-preview.docs-preview-flex .d-inline-flex{border-radius:.5rem;background-image:linear-gradient(45deg, rgba(245, 118, 0, 0.4) 10%, transparent 0, transparent 50%, rgba(245, 118, 0, 0.4) 0, rgba(245, 118, 0, 0.4) 60%, transparent 0, transparent);background-size:6px 6px}.docs-example .docs-preview.docs-preview-flex .d-flex>*,.docs-example .docs-preview.docs-preview-flex .d-inline-flex>*{padding:.75rem 0;background:rgba(245,118,0,.1);border:1px solid #f57600;text-align:center;border-radius:.5rem;backdrop-filter:blur(2px)}.docs-example .docs-preview.docs-preview-flex .d-flex>*.md-item,.docs-example .docs-preview.docs-preview-flex .d-inline-flex>*.md-item{padding:1rem;align-content:center}.docs-example .docs-preview.docs-preview-border{display:flex;flex-wrap:wrap;padding-bottom:.5rem}.docs-example .docs-preview.docs-preview-border [class^=border]{width:100px;height:100px;margin-right:1rem;margin-bottom:1rem;background-color:var(--grey-100)}.docs-example .docs-preview.docs-preview-border [class^=border]:last-child{margin-right:0}.docs-example .docs-preview.docs-preview-border.bordered [class^=border]{border:1px solid var(--grey-400)}.docs-example .docs-preview.docs-preview-position .position-relative{background:var(--grey-100);height:150px;width:100%;border-radius:.4rem}.docs-example .docs-preview.docs-preview-position .position-absolute{width:32px;height:32px;border-radius:.4rem}.docs-example .docs-preview.docs-preview-scale .blocks{width:32px;height:32px;border-radius:.4rem}.docs-example .docs-preview.docs-preview-gradient div{border-radius:.4rem;padding:1.5rem;display:flex;justify-content:center;align-items:center}.docs-example .docs-preview.docs-preview-gradient-radial div{border-radius:.4rem;width:300px;height:300px;display:flex;justify-content:center;align-items:center}.docs-example .docs-preview.docs-preview-offcanvas{padding:0}.docs-example .docs-preview.docs-preview-offcanvas .offcanvas{position:static;display:block;height:240px;visibility:visible;transform:translate(0)}.docs-example .docs-preview.docs-preview-dropdown-menu .dropdown-menu{position:relative;margin-top:0;z-index:initial}.docs-example .docs-preview.docs-preview-avatar{display:grid;grid-template-columns:repeat(auto-fill, minmax(32px, 1fr));gap:.5rem}.docs-example .highlight>pre{margin:0;padding:1rem 1.5rem;border-radius:0 0 .5rem .5rem;font-size:14px;line-height:1.5;font-family:var(--font-family-mono);white-space:pre-wrap}.docs-example .highlight:first-child>pre{border-radius:.5rem}.grid-14{grid-template-columns:repeat(14, minmax(0, 1fr)) !important}.text-marketing-css{display:inline-block;background-image:linear-gradient(135deg, var(--amber-600), var(--pink-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.text-marketing-ui{display:inline-block;background-image:linear-gradient(135deg, var(--lime-600), var(--cyan-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.text-marketing-icons{display:inline-block;background-image:linear-gradient(135deg, var(--blue-600), var(--violet-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}
+.chroma{--sh-background-background: var(--light, #fafafa) var(--dark, #101010);--sh-background-color: var(--light, #101010) var(--dark, #fafafa);--sh-comment: #75715e;--sh-error-background: #1e0010;--sh-error-color: #960050;--sh-generic-deleted-color: var(--light, inherit) var(--dark, #f92672);--sh-generic-inserted-color: var(--light, inherit) var(--dark, #a6e22e);--sh-generic-subheading-color: var(--light, inherit) var(--dark, #75715e);--sh-keyword-color: var(--light, #00a8c8) var(--dark, #66d9ef);--sh-keyword-constant-color: var(--sh-keyword-color);--sh-keyword-declaration-color: var(--sh-keyword-color);--sh-keyword-namespace-color: #f92672;--sh-keyword-pseudo-color: var(--sh-keyword-color);--sh-keyword-reserved-color: var(--sh-keyword-color);--sh-keyword-type-color: var(--sh-keyword-color);--sh-line-highlight-background: #ffc;--sh-line-numbers-color: #7f7f7f;--sh-literal-color: #ae81ff;--sh-literal-date-color: var(--light, #d88200) var(--dark, #e6db74);--sh-literal-number-bin-color: var(--sh-literal-color);--sh-literal-number-color: var(--sh-literal-color);--sh-literal-number-float-color: var(--sh-literal-color);--sh-literal-number-hex-color: var(--sh-literal-color);--sh-literal-number-integer-color: var(--sh-literal-color);--sh-literal-number-integer-long-color: var(--sh-literal-color);--sh-literal-number-oct-color: var(--sh-literal-color);--sh-literal-string-affix-color: var(--sh-literal-date-color);--sh-literal-string-backtick-color: var(--sh-literal-date-color);--sh-literal-string-char-color: var(--sh-literal-date-color);--sh-literal-string-color: var(--sh-literal-date-color);--sh-literal-string-delimiter-color: var(--sh-literal-date-color);--sh-literal-string-doc-color: var(--sh-literal-date-color);--sh-literal-string-double-color: var(--sh-literal-date-color);--sh-literal-string-escape-color: var(--sh-literal-color);--sh-literal-string-heredoc-color: var(--sh-literal-date-color);--sh-literal-string-interpol-color: var(--sh-literal-date-color);--sh-literal-string-other-color: var(--sh-literal-date-color);--sh-literal-string-regex-color: var(--sh-literal-date-color);--sh-literal-string-single-color: var(--sh-literal-date-color);--sh-literal-string-symbol-color: var(--sh-literal-date-color);--sh-name-attribute-color: var(--light, #75af00) var(--dark, #a6e22e);--sh-name-builtin-color: var(--sh-name-color);--sh-name-builtin-pseudo-color: var(--sh-name-color);--sh-name-class-color: var(--sh-name-attribute-color);--sh-name-color: var(--light, #111) var(--dark, inherit);--sh-name-constant-color: var(--light, #00a8c8) var(--dark, #66d9ef);--sh-name-decorator-color: var(--sh-name-attribute-color);--sh-name-entity-color: var(--sh-name-color);--sh-name-exception-color: var(--sh-name-attribute-color);--sh-name-function-color: var(--sh-name-attribute-color);--sh-name-function-magic-color: var(--sh-name-color);--sh-name-label-color: var(--sh-name-color);--sh-name-namespace-color: var(--sh-name-color);--sh-name-other-color: var(--sh-name-attribute-color);--sh-name-property-color: var(--sh-name-color);--sh-name-tag-color: var(--sh-keyword-namespace-color);--sh-name-variable-class-color: var(--sh-name-color);--sh-name-variable-color: var(--sh-name-color);--sh-name-variable-global-color: var(--sh-name-color);--sh-name-variable-instance-color: var(--sh-name-color);--sh-name-variable-magic-color: var(--sh-name-color);--sh-operator-color: var(--sh-keyword-namespace-color);--sh-operator-word-color: var(--sh-keyword-namespace-color);--sh-pre-wrapper-background: var(--light, #fafafa) var(--dark, #101010);--sh-pre-wrapper-color: var(--light, #101010) var(--dark, #fafafa);--sh-punctuation-color: var(--sh-name-color);color:var(--sh-pre-wrapper-color);background-color:var(--sh-pre-wrapper-background)}.bg{color:var(--sh-background-color);background-color:var(--sh-background-background)}.chroma .bp{color:var(--sh-name-builtin-pseudo-color)}.chroma .c{color:var(--sh-comment)}.chroma .c1{color:var(--sh-comment)}.chroma .ch{color:var(--sh-comment)}.chroma .cm{color:var(--sh-comment)}.chroma .cp{color:var(--sh-comment)}.chroma .cpf{color:var(--sh-comment)}.chroma .cs{color:var(--sh-comment)}.chroma .dl{color:var(--sh-literal-string-delimiter-colo)}.chroma .err{color:var(--sh-error-color);background-color:var(--sh-error-background)}.chroma .fm{color:var(--sh-name-function-magic-color)}.chroma .gd{color:var(--sh-generic-deleted-color)}.chroma .ge{font-style:italic}.chroma .gi{color:var(--sh-generic-inserted-color)}.chroma .gs{font-weight:bold}.chroma .gu{color:var(--sh-generic-subheading-color)}.chroma .hl{background-color:var(--sh-line-highlight-background)}.chroma .il{color:var(--sh-literal-number-integer-long-color)}.chroma .k{color:var(--sh-keyword-color)}.chroma .kc{color:var(--sh-keyword-constant-color)}.chroma .kd{color:var(--sh-keyword-declaration-color)}.chroma .kn{color:var(--sh-keyword-namespace-color)}.chroma .kp{color:var(--sh-keyword-pseudo-color)}.chroma .kr{color:var(--sh-keyword-reserved-color)}.chroma .kt{color:var(--sh-keyword-type-color)}.chroma .l{color:var(--sh-literal-color)}.chroma .ld{color:var(--sh-literal-date-color)}.chroma .line{display:flex}.chroma .ln{white-space:pre;user-select:none;margin-right:.4em;padding:0 .4em;color:var(--sh-line-numbers-color)}.chroma .lnt{white-space:pre;user-select:none;margin-right:.4em;padding:0 .4em;color:var(--sh-line-numbers-color)}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .m{color:var(--sh-literal-number-color)}.chroma .mb{color:var(--sh-literal-number-bin-color)}.chroma .mf{color:var(--sh-literal-number-float-color)}.chroma .mh{color:var(--sh-literal-number-hex-color)}.chroma .mi{color:var(--sh-literal-number-integer-color)}.chroma .mo{color:var(--sh-literal-number-oct-color)}.chroma .n{color:var(--sh-name-color)}.chroma .na{color:var(--sh-name-attribute-color)}.chroma .nb{color:var(--sh-name-builtin-color)}.chroma .nc{color:var(--sh-name-class-color)}.chroma .nd{color:var(--sh-name-decorator-color)}.chroma .ne{color:var(--sh-name-exception-color)}.chroma .nf{color:var(--sh-name-function-color)}.chroma .ni{color:var(--sh-name-entity-color)}.chroma .nl{color:var(--sh-name-label-color)}.chroma .nn{color:var(--sh-name-namespace-color)}.chroma .no{color:var(--sh-name-constant-color)}.chroma .nt{color:var(--sh-name-tag-color)}.chroma .nv{color:var(--sh-name-variable-color)}.chroma .nx{color:var(--sh-name-other-color)}.chroma .o{color:var(--sh-operator-color)}.chroma .ow{color:var(--sh-operator-word-color)}.chroma .p{color:var(--sh-chroma-p-color)}.chroma .py{color:var(--sh-name-property-color)}.chroma .s{color:var(--sh-literal-string-color)}.chroma .s1{color:var(--sh-literal-string-single-color)}.chroma .s2{color:var(--sh-literal-string-double-color)}.chroma .sa{color:var(--sh-literal-string-affix-color)}.chroma .sb{color:var(--sh-literal-string-backtick-color)}.chroma .sc{color:var(--sh-literal-string-char-color)}.chroma .sd{color:var(--sh-literal-string-doc-color)}.chroma .se{color:var(--sh-literal-string-escape-color)}.chroma .sh{color:var(--sh-literal-string-heredoc-color)}.chroma .si{color:var(--sh-literal-string-interpol-color)}.chroma .sr{color:var(--sh-literal-string-regex-color)}.chroma .ss{color:var(--sh-literal-string-symbol-color)}.chroma .sx{color:var(--sh-literal-string-other-color)}.chroma .vc{color:var(--sh-name-variable-class-color)}.chroma .vg{color:var(--sh-name-variable-global-color)}.chroma .vi{color:var(--sh-name-variable-instance-color)}.chroma .vm{color:var(--sh-name-variable-magic-color)}.docs-grid{min-height:100vh;position:relative;display:grid;grid-template-columns:auto;grid-template-rows:56px auto;grid-template-areas:"navbar" "main"}@media(min-width: 800px){.docs-grid{grid-template-columns:240px auto;grid-template-areas:"navbar navbar" "sidebar main"}}.docs-home{min-height:100vh;position:relative;display:grid;grid-template-columns:auto;grid-template-rows:56px auto;grid-template-areas:"navbar" "main"}@media(min-width: 800px){.docs-home{grid-template-columns:auto;grid-template-areas:"navbar" "main"}}.docs-navbar{grid-area:navbar;position:sticky;top:0;z-index:1030}.docs-navigation .list .list-item{font-size:87.5%;border-radius:0;color:var(--grey-800) !important}.docs-navigation .list .list-item:hover{background-color:var(--accent-50) !important;color:var(--accent-800) !important}.docs-navigation .list .list-item:hover.active,.docs-navigation .list .list-item.active{background-color:var(--accent-100) !important;color:var(--accent-800) !important}.docs-footer{grid-area:footer;border-top:1px solid var(--grey-300);background-color:var(--light, #f2f3f4) var(--dark, #101114)}.docs-page{display:flex;flex-direction:column}.docs-main{flex-grow:1;display:grid;max-width:100vw;gap:2rem;grid-area:main;margin:0 auto;padding:36px;grid-template-columns:100%;grid-template-rows:auto auto auto;grid-template-areas:"meta" "toc" "article"}@media(min-width: 1000px){.docs-main{grid-template-columns:auto 200px;grid-template-rows:max-content auto;grid-template-areas:"meta toc" "article toc"}}@media(min-width: 1400px){.docs-main{grid-template-columns:840px 200px}}.docs-main .docs-main-meta{grid-area:meta;width:100%}.docs-main .docs-main-toc{grid-area:toc}.docs-main .docs-main-toc .docs-toc{position:sticky;top:96px}.docs-main .docs-main-content{grid-area:article}@media(min-width: 800px){.docs-sidebar{grid-area:sidebar;position:sticky;top:56px;border-right:1px solid var(--grey-300);height:calc(100vh - 56px);z-index:1020}.docs-sidebar .offcanvas-body{overflow:auto;height:calc(100vh - 56px)}}.docs-toc{position:sticky;top:1rem;height:subtract(100vh, 59px);overflow-y:auto}.docs-toc nav{font-size:.875rem}.docs-toc nav ul{padding-left:0;list-style:none}.docs-toc nav ul ul{padding-left:1.25rem}.docs-toc nav a{display:inline-flex;text-decoration:none;padding:.25rem .5rem;margin-bottom:.125rem;border-radius:.25rem;color:var(--grey-800);font-size:.875rem}.docs-toc nav a:hover{background-color:var(--accent-200);color:inherit}.docs-toc nav a code{margin-right:3px;font:inherit}.docs-content>h2:not(:first-child){margin-top:3rem}.docs-content>h3:not(:first-child){margin-top:2.5rem}.docs-content p,.docs-content li{line-height:1.5}.docs-example{border:1px solid var(--grey-300);border-radius:.5rem;margin-bottom:1rem;width:100%}.docs-example .docs-preview{padding:1.5rem;margin:0}.docs-example .docs-preview:not(:last-child){border-bottom:1px solid var(--grey-300)}.docs-example .docs-preview>:last-child{margin-bottom:0}.docs-example .docs-preview .nav+.nav,.docs-example .docs-preview progress+progress,.docs-example .docs-preview progress+.progress,.docs-example .docs-preview .progress+progress,.docs-example .docs-preview .progress+.progress{margin-top:1rem}.docs-example .docs-preview.docs-colors-preview .color{border-radius:.4rem;background:var(--color-600);color:var(--color-text);overflow:hidden;position:relative}.docs-example .docs-preview.docs-colors-preview .color h5{padding:1rem;margin-bottom:1rem}.docs-example .docs-preview.docs-colors-preview .color .label{position:absolute;right:1rem;bottom:2rem;transform:translateY(50%)}.docs-example .docs-preview.docs-colors-preview .color .color-swatch{width:100%;background:var(--color-800);padding:1rem}.docs-example .docs-preview.docs-bg-colors-preview.grid>div{border-radius:.4rem;padding:1rem}.docs-example .docs-preview.docs-preview-sizing-rows>div{display:flex;align-items:center}.docs-example .docs-preview.docs-preview-sizing-rows>div:not(:last-child){margin-bottom:.5rem}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:first-child{width:6rem;flex-shrink:0}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:last-child{flex-grow:1}.docs-example .docs-preview.docs-preview-sizing-rows>div>div:last-child>div{background-color:var(--accent-600);border-radius:.4rem;padding-top:1rem;padding-bottom:1rem;color:#fff}.docs-example .docs-preview.docs-preview-sizing-columns{display:flex}.docs-example .docs-preview.docs-preview-sizing-columns>div{display:flex;flex-direction:column;align-items:center}.docs-example .docs-preview.docs-preview-sizing-columns>div:not(:last-child){margin-right:.5rem}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:first-child{width:6rem;flex-shrink:0;text-align:center;margin-bottom:.5rem}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:last-child{flex-grow:1;width:100%}.docs-example .docs-preview.docs-preview-sizing-columns>div>div:last-child>div{background-color:var(--accent-600);border-radius:.4rem;padding-left:1rem;padding-right:1rem;color:#fff}.docs-example .docs-preview.docs-preview-img{background-image:url("/img/background.png");background-size:cover;background-position:center bottom;height:250px;width:100%;position:relative}.docs-example .docs-preview.docs-preview-grid .grid{border-radius:.5rem;background-image:linear-gradient(45deg, rgba(0, 123, 255, 0.4) 10%, transparent 0, transparent 50%, rgba(0, 123, 255, 0.4) 0, rgba(0, 123, 255, 0.4) 60%, transparent 0, transparent);background-size:6px 6px}.docs-example .docs-preview.docs-preview-grid .grid>*{padding:.75rem 0;background:rgba(0,123,255,.1);border:1px solid #007bff;text-align:center;border-radius:.5rem;backdrop-filter:blur(2px)}.docs-example .docs-preview.docs-preview-flex .d-flex,.docs-example .docs-preview.docs-preview-flex .d-inline-flex{border-radius:.5rem;background-image:linear-gradient(45deg, rgba(245, 118, 0, 0.4) 10%, transparent 0, transparent 50%, rgba(245, 118, 0, 0.4) 0, rgba(245, 118, 0, 0.4) 60%, transparent 0, transparent);background-size:6px 6px}.docs-example .docs-preview.docs-preview-flex .d-flex>*,.docs-example .docs-preview.docs-preview-flex .d-inline-flex>*{padding:.75rem 0;background:rgba(245,118,0,.1);border:1px solid #f57600;text-align:center;border-radius:.5rem;backdrop-filter:blur(2px)}.docs-example .docs-preview.docs-preview-flex .d-flex>*.md-item,.docs-example .docs-preview.docs-preview-flex .d-inline-flex>*.md-item{padding:1rem;align-content:center}.docs-example .docs-preview.docs-preview-border{display:flex;flex-wrap:wrap;padding-bottom:.5rem}.docs-example .docs-preview.docs-preview-border [class^=border]{width:100px;height:100px;margin-right:1rem;margin-bottom:1rem;background-color:var(--grey-100)}.docs-example .docs-preview.docs-preview-border [class^=border]:last-child{margin-right:0}.docs-example .docs-preview.docs-preview-border.bordered [class^=border]{border:1px solid var(--grey-400)}.docs-example .docs-preview.docs-preview-position .position-relative{background:var(--grey-100);height:150px;width:100%;border-radius:.4rem}.docs-example .docs-preview.docs-preview-position .position-absolute{width:32px;height:32px;border-radius:.4rem}.docs-example .docs-preview.docs-preview-scale .blocks{width:32px;height:32px;border-radius:.4rem}.docs-example .docs-preview.docs-preview-gradient div{border-radius:.4rem;padding:1.5rem;display:flex;justify-content:center;align-items:center}.docs-example .docs-preview.docs-preview-gradient-radial div{border-radius:.4rem;width:300px;height:300px;display:flex;justify-content:center;align-items:center}.docs-example .docs-preview.docs-preview-offcanvas{padding:0}.docs-example .docs-preview.docs-preview-offcanvas .offcanvas{position:static;display:block;height:240px;visibility:visible;transform:translate(0)}.docs-example .docs-preview.docs-preview-dropdown-menu .dropdown-menu{position:relative;margin-top:0;z-index:initial}.docs-example .docs-preview.docs-preview-avatar{display:grid;grid-template-columns:repeat(auto-fill, minmax(32px, 1fr));gap:.5rem}.docs-example .highlight>pre{margin:0;padding:1rem 1.5rem;border-radius:0 0 .5rem .5rem;font-size:14px;line-height:1.5;font-family:var(--font-family-mono);white-space:pre-wrap}.docs-example .highlight:first-child>pre{border-radius:.5rem}.grid-14{grid-template-columns:repeat(14, minmax(0, 1fr)) !important}.text-marketing-css{display:inline-block;background-image:linear-gradient(135deg, var(--amber-600), var(--pink-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.text-marketing-ui{display:inline-block;background-image:linear-gradient(135deg, var(--lime-600), var(--cyan-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.text-marketing-icons{display:inline-block;background-image:linear-gradient(135deg, var(--blue-600), var(--violet-600));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}
diff --git a/hugo/content/components/list.md b/hugo/content/components/list.md
index 845fd35..73aebe6 100644
--- a/hugo/content/components/list.md
+++ b/hugo/content/components/list.md
@@ -13,12 +13,18 @@ A basic list contains only a label.
 {{<example>}}
 <ul class="list mb-3">
   <li class="list-item"><span class="list-item-label">This is a list item</span></li>
-  <li class="list-item"><span class="list-item-label">This is also a list item</span></li>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
 </ul>
 
 <ul class="list border">
   <li class="list-item"><span class="list-item-label">This is a list item</span></li>
-  <li class="list-item"><span class="list-item-label">This is also a list item</span></li>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
 </ul>
 {{</example>}}
 
@@ -39,12 +45,18 @@ Lists provide a few divider styles including the default `list-dividers` and `li
 {{<example>}}
 <ul class="list list-dividers border mb-3">
   <li class="list-item"><span class="list-item-label">This is a list item</span></li>
-  <li class="list-item"><span class="list-item-label">This is also a list item</span></li>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <li class="list-item"><span class="list-item-label">Yet another item</span></li>
 </ul>
 <ul class="list list-dividers-full border">
   <li class="list-item"><span class="list-item-label">This is a list item</span></li>
-  <li class="list-item"><span class="list-item-label">This is also a list item</span></li>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <li class="list-item"><span class="list-item-label">Yet another item</span></li>
 </ul>
 {{</example>}}
@@ -56,14 +68,20 @@ If you rather have more fine-grainded control over where dividers appear, you ca
 <ul class="list border mb-3">
   <li class="list-item"><span class="list-item-label">This is a list item</span></li>
   <li class="list-divider" role="separator"></li>
-  <li class="list-item"><span class="list-item-label">This is also a list item</span></li>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <li class="list-divider" role="separator"></li>
   <li class="list-item"><span class="list-item-label">Yet another item</span></li>
 </ul>
 <nav class="list border">
   <div class="list-item"><span class="list-item-label">This is a list item</span></div>
   <div class="list-divider-full" role="separator"></div>
-  <div class="list-item"><span class="list-item-label">This is also a list item</span></div>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <div class="list-divider-full" role="separator"></div>
   <div class="list-item"><span class="list-item-label">Yet another item</span></div>
 </nav>
@@ -78,7 +96,10 @@ If a section needs a text label, you can do that with `list-item-divider`. When
 <div class="list list-dividers border mb-3">
   <div class="list-item-divider" role="presentation" id="some-unique-id" aria-hidden="true">Section divider</div>
   <div class="list-item"><span class="list-item-label">This is a list item</span></div>
-  <div class="list-item"><span class="list-item-label">This is also a list item</span></div>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <div class="list-item-divider" role="presentation" id="some-unique-id" aria-hidden="true">Section divider<span class="list-item-divider-description">Section description</span></div>
   <div class="list-item"><span class="list-item-label">Yet another item</span></div>
   <div class="list-item"><span class="list-item-label">This is a list item</span></div>
@@ -86,7 +107,10 @@ If a section needs a text label, you can do that with `list-item-divider`. When
 <div class="list border">
   <div class="list-item-divider" role="presentation" id="some-unique-id" aria-hidden="true">Section divider</div>
   <div class="list-item"><span class="list-item-label">This is a list item</span></div>
-  <div class="list-item"><span class="list-item-label">This is also a list item</span></div>
+  <li class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </li>
   <div class="list-item-divider" role="presentation" id="some-unique-id" aria-hidden="true">Section divider<span class="list-item-divider-description">Section description</span></div>
   <div class="list-item"><span class="list-item-label">Yet another item</span></div>
   <div class="list-item"><span class="list-item-label">This is a list item</span></div>
@@ -97,12 +121,18 @@ If a section needs a text label, you can do that with `list-item-divider`. When
 {{<example>}}
 <div class="list mb-3">
   <a href="#" class="list-item"><span class="list-item-label">This is a list item</span></a>
-  <a href="#" class="list-item"><span class="list-item-label">This is also a list item</span></a>
+  <a href="#" class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </a>
   <a href="#" class="list-item"><span class="list-item-label">Yet another item</span></a>
 </div>
 <div class="list list-dividers">
   <a href="#" class="list-item"><span class="list-item-label">This is a list item</span></a>
-  <a href="#" class="list-item"><span class="list-item-label">This is also a list item</span></a>
+  <a href="#" class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </a>
   <a href="#" class="list-item"><span class="list-item-label">Yet another item</span></a>
 </div>
 {{</example>}}
@@ -111,7 +141,10 @@ Adding the `border` class to the list will disable the border radius for all ele
 {{<example>}}
 <div class="list border">
   <a href="#" class="list-item"><span class="list-item-label">This is a list item</span></a>
-  <a href="#" class="list-item"><span class="list-item-label">This is also a list item</span></a>
+  <a href="#" class="list-item">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </a>
   <a href="#" class="list-item"><span class="list-item-label">Yet another item</span></a>
 </div>
 {{</example>}}
@@ -122,7 +155,10 @@ When adding the `active` class, Mellow will show an active indicator and backgro
 {{<example>}}
 <div class="list">
   <a href="#" class="list-item"><span class="list-item-label">This is a list item</span></a>
-  <a href="#" class="list-item active"><span class="list-item-label">This is also a list item</span></a>
+  <a href="#" class="list-item active">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </a>
   <a href="#" class="list-item"><span class="list-item-label">Yet another item</span></a>
 </div>
 {{</example>}}
@@ -144,7 +180,10 @@ If an action requires more attention from the user then the `list-item-colored`
 {{<example>}}
 <div class="list">
   <a href="#" class="list-item"><span class="list-item-label">This is a list item</span></a>
-  <a href="#" class="list-item list-item-colored green active"><span class="list-item-label">This is also a list item</span></a>
+  <a href="#" class="list-item list-item-colored active green">
+    <span class="list-item-label">This is also a list item</span>
+    <span class="list-item-description">This is the description</span>
+  </a>
   <a href="#" class="list-item list-item-colored red"><span class="list-item-label">Delete everything</span></a>
 </div>
 {{</example>}}
diff --git a/scss/_list.scss b/scss/_list.scss
index 19fd5bf..d2d1f2b 100644
--- a/scss/_list.scss
+++ b/scss/_list.scss
@@ -7,10 +7,12 @@
 .list-item {
   position: relative;
   display: grid;
-  grid-template-rows: min-content;
+  grid-template-rows: min-content min-content;
   grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  grid-template-areas: "item-action-s item-icon-s item-label item-icon-e item-action-e";
+  grid-template-areas:
+    "item-action-s item-icon-s item-label item-icon-e item-action-e"
+    "item-action-s item-icon-s item-description item-icon-e item-action-e";
   padding: var(--list-item-padding-y, $spacer * .5) $spacer;
   border-radius: $border-radius;
   align-items: center;
@@ -33,6 +35,13 @@
     position: relative;
   }
 
+  .list-item-description {
+    grid-area: item-description;
+    position: relative;
+    font-size: .8em;
+    color: $muted;
+  }
+
   .list-item-icon-s {
     grid-area: item-icon-s;
   }