:root {
    --Q-article-margin: 0 0 var(--Q-app-spacing-5) 0;
    --Q-article-banner-margin: 0 0 var(--Q-app-spacing-2) 0;
    --Q-article-banner-padding: var(--Q-app-spacing-2);
    --Q-article-banner-border-radius: var(--Q-app-item-border-radius);
    --Q-article-banner-font-family: var(--Q-app-font-family-headers);
    --Q-article-banner-font-color: var(--Q-app-font-color-1);
    --Q-article-banner-background: var(--Q-app-item-color-standard);
    --Q-article-banner-green-background: var(--Q-app-item-color-green);
    --Q-article-banner-orange-background: var(--Q-app-item-color-orange);
    --Q-article-banner-red-background: var(--Q-app-item-color-red);
    
    --Q-article-title-margin: 0 0 var(--Q-app-spacing-4) 0;
    --Q-article-title-button-margin: 0 0 0 var(--Q-app-spacing-2);
    --Q-article-subtitle-margin: var(--Q-app-spacing-2) 0 var(--Q-app-spacing-3) 0;
    --Q-article-paragraph-margin: 0 0 var(--Q-app-spacing-2) 0;

    --Q-article-block-margin: 0 0 var(--Q-app-spacing-2) 0;
    --Q-article-block-padding: var(--Q-app-spacing-3);
    --Q-article-block-background: var(--Q-app-background-5);
    --Q-article-block-border-radius: var(--Q-app-item-border-radius);
}

.Q-article {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.Q-article:not(:last-child) {
    margin: var(--Q-article-margin);
}

.Q-article-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: var(--Q-article-banner-margin);
    padding: var(--Q-article-banner-padding);
    border-radius: var(--Q-article-banner-border-radius);
    background: var(--Q-article-banner-background);
    font-family: var(--Q-article-banner-font-family);
    color: var(--Q-article-banner-font-color);
}

.Q-article-banner-center {
    align-items: center;
    align-self: center;
    text-align: center;
}

.Q-article-banner p {
    font-family: var(--Q-article-banner-font-family);
    color: var(--Q-article-banner-font-color);
}

.Q-article-banner-green {
    background: var(--Q-article-banner-green-background);
}

.Q-article-banner-orange {
    background: var(--Q-article-banner-orange-background);
}

.Q-article-banner-red {
    background: var(--Q-article-banner-red-background);
}

.Q-article-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: var(--Q-article-title-margin);
}

.Q-article-title button {
    margin: var(--Q-article-title-button-margin);
}

.Q-article-subtitle {
    margin: var(--Q-article-subtitle-margin);
}

.Q-article-paragraph {
    margin: var(--Q-article-paragraph-margin);
}

.Q-article-code {
    display: flex;
    overflow: auto;
    width: 100%;
}

.Q-article-block {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: var(--Q-article-block-margin);
    padding: var(--Q-article-block-padding);
    background: var(--Q-article-block-background);
    border-radius: var(--Q-article-block-border-radius);
}