@layer components {
    .staldia-article-content {
        display: grid;
        gap: 1rem;
        font-size: var(--font-size-s);
        letter-spacing: .05rem;
        line-height: 2.2;
    }
    .staldia-article-content h2,
    .staldia-article-content.staldia-sd-content h3 {
        line-height: 1.5;
        padding-bottom: 1rem;
        border-bottom: 1px solid #bfbfbf;
        margin-top: 3rem;
    }
    .staldia-article-content h2 {
        font-size: 1.5rem;
    }
    .staldia-article-content h2:first-child,
    .staldia-article-content.staldia-sd-content h3:first-child {
        margin-top: 0;
    }
    .staldia-article-content h3 {
        font-size: var(--font-size-xl);
        padding-left: 1rem;
        border-left: 3px solid var(--color-shadow-sand);
        line-height: 1.8;
        margin-top: 2rem;
    }
    .staldia-article-content.staldia-sd-content h3 {
        border-left: none;
        padding-left: 0;
    }
    .staldia-article-content h4 {
        position: relative;
        font-size: 1rem;
        padding-left: 1.5rem;
        margin-top: 1.5rem;
    }
    .staldia-article-content h4:before {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: .65rem;
        left: 0;
        background: var(--color-shadow-sand);
        border-radius: 50%;
    }
    .staldia-article-content h5 {
        margin-top: 1.25rem;
        font-size: .95rem;
    }
    .staldia-article-content h6 {
        margin-top: 1.125rem;
        font-size: .9rem;
    }
    .staldia-article-content strong {
        background: linear-gradient(
            transparent 60%,
            rgb(var(--color-accent-rgb) / .3333) 60%)
    }
    .staldia-article-content ul,
    .staldia-article-content ol {
        display: grid;
        gap: .25rem;
    }
    .staldia-article-content li {
        position: relative;
        padding-left: 1rem;
    }
    .staldia-article-content ul > li:before,
    .staldia-article-content ol > li:before {
        position: absolute;
        left: 0;
    }
    .staldia-article-content ul > li:before {
        content: "";
        --size: .5rem;
        width: var(--size);
        height: var(--size);
        background: var(--color-shadow-sand);
        border-radius: 50%;
        top: .75rem;
    }
    .staldia-article-content.staldia-sd-content li {
        padding-left: 1.25rem;
    }
    .staldia-article-content.staldia-sd-content ul > li:before {
        --size: .875rem;
        top: .5rem;
    }
    .staldia-article-content ol {
        counter-reset: ol-counter;
    }
    .staldia-article-content ol > li {
        counter-increment: ol-counter;
        padding-left: 2rem;
    }
    .staldia-article-content ol > li:before {
        content: "0" counter(ol-counter) ".";
        color: var(--color-accent);
        font-size: var(--font-size-xl);
        font-family: var(--font-serif-en);
        line-height: 1.375;
    }
    .staldia-article-content ol > li:nth-child(n + 10):before {
        content: counter(ol-counter) ".";
    }
    .staldia-article-content figure {
        display: grid;
        gap: .5rem;
        width: 100% !important;
        margin-block: 1rem;
    }
    .staldia-article-content img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        border-radius: 10px;
    }
    .staldia-article-content figcaption {
        font-size: var(--font-size-xs);
    }
    .staldia-article-content a {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        color: var(--color-accent);
    }
    .staldia-article-content a:hover {
        text-decoration: none;
    }
    .staldia-article-content table th,
    .staldia-article-content table td {
        padding: 1rem;
    }
    .staldia-article-content table th {
        background: var(--color-bg-sub);
        vertical-align: middle;
        font-weight: 500;
    }
    .staldia-article-content .staldia-simple-box {
        background: rgb(var(--color-shadow-sand-rgb) / .25);
        border-radius: 5px;
        padding: 1rem;
    }
    @media (max-width: 599.99px) {
        .staldia-article-content table,
        .staldia-article-content tbody,
        .staldia-article-content table tr,
        .staldia-article-content table th,
        .staldia-article-content table td {
            display: block;
            width: 100% !important;
            height: auto !important;
        }
    }
    @media (min-width: 600px) {
        .staldia-article-content table tr {
            --border: 1px solid rgb(240 240 240);
            border-bottom: var(--border);
        }
        .staldia-article-content table tr:first-child {
            border-top: var(--border);
        }
    }
}