.view--main{
	display: flex; gap: 32px; flex-direction: column; padding: 48px;
}

dialog.view--main{
    gap: 16px; padding: 16px;
}

.view--main.--page {
    max-width: 740px;
}

.view--main a.--underline {
    --saturation : 70%;
    color: hsl(var(--hue),var(--saturation),var(--lightness)); 
}

.view--main h2 {
    font-size: 28px; font-weight: normal; margin: 0; overflow: hidden;
    color: hsl(var(--hue),var(--saturation),40%); 
}

.view--main h3 {
    font-size: 19px; font-weight: normal; margin: 0; overflow: hidden;
    color: hsl(var(--hue),var(--saturation),50%); 
}

.view--main p {
    font-size: 16px; font-weight: normal; margin: 0; overflow: hidden;
    color: hsl(var(--hue),var(--saturation),20%);
}

.view--main ol {
    margin: 0; 
}

.view--main ul {
    margin: 0; 
}

.view--main li::marker {
    text-align: center;
}

.view--main a.link:hover {
    text-decoration: underline;
}

.--lh-150 {
    line-height: 1.5;
    --line-height: 1.5;
}

.--empty:empty{
    display: none;
}

.--border-bottom {
    border-bottom: 1px solid hsl(var(--hue),var(--saturation),90%);
}

.--flex{
    display: flex; flex-wrap: wrap;
}

.--flex-col{
    display: flex; flex-direction: column;
}

.--flex-4{
    display: flex; gap: 4px; flex-wrap: wrap;
}

.--flex-col-4{
    display: flex; gap: 4px; flex-direction: column;
}

.--flex-8{
    display: flex; gap: 8px; flex-wrap: wrap;
}

.--flex-col-8{
    display: flex; gap: 8px; flex-direction: column;
}

.--flex-16{
    display: flex; gap: 16px; flex-wrap: wrap;
}

.--flex-col-16{
    display: flex; gap: 16px; flex-direction: column;
}

.--flex-32{
    display: flex; gap: 32px; flex-wrap: wrap;
}

.--flex-col-32{
    display: flex; gap: 32px; flex-direction: column;
}

.--buttons{
    display: flex; gap: 8px; flex-wrap: wrap;
}