/* Decorative system */
.glyph {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg);
    flex: 0 0 auto;
}

.glyph img {
    width: 16px;
    height: 16px;
    display: block;
}

.glyph.dark {
    background: var(--black-1000);
    border-color: var(--black-100);
}

.glyph.dark img {
    filter: var(--invert);
}


.section {
    display: flex;
    flex-direction: column;
    padding: 64px 0 !important;
    position: relative;
}

.section.no-bottom-padding {
    padding-bottom: 0 !important;

}

.section.medium {
    padding: 32px 0 !important;
    position: relative;
}

.section.small {
    padding: 16px 0 !important;
    position: relative;
}

.section.compact {
    padding: 48px 0;
}


.section.alt {
    border-top: none;
    padding: 0;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--black-400) !important;
}

.section.dark {
    background: var(--black-1000);
    color: var(--bg);
}

.section.dark a {
    color: var(--bg);
}

.section.dark .muted {
    color: var(--black-100);
}


.section.dark .card {
    background: var(--black-100);
    border-color: var(--black-100);
    box-shadow: var(--shadow-none);
}

.section.dark .card:hover {
    background: var(--black-100);
    border-color: var(--black-100);
}


.section.dark .divider::before,
.section.dark .divider::after {
    border-color: var(--black-100);
}

.deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .9;
}

.deco svg {
    position: absolute;
    fill: none;
    stroke: var(--black-1000);
    stroke-width: 1;
    opacity: .12;
}

.section.dark .deco svg {
    stroke: var(--bg);
    opacity: .10;
}

.deco .ring {
    width: 540px;
    height: 540px;
    right: -210px;
    top: -200px;
}

.deco .constell {
    width: 480px;
    height: 480px;
    left: -210px;
    bottom: -220px;
}

.deco .phases {
    width: 420px;
    height: 420px;
    left: 50%;
    top: -210px;
    transform: translateX(-50%);
    opacity: .09;
}

.deco .sigil {
    width: 360px;
    height: 360px;
    right: 10%;
    bottom: -220px;
    opacity: .10;
}

.grid {
    display: grid;
    gap: 18px;
}

.grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}