/* ==========================================
UndefinedVerseOfficial
Layout System
========================================== */

.container {
width: min(
calc(100% - 2 * var(--container-padding)),
var(--container-width)
);
margin-inline: auto;
}

.container-narrow {
width: min(
calc(100% - 2 * var(--container-padding)),
820px
);
margin-inline: auto;
}

.container-wide {
width: min(
calc(100% - 2 * var(--container-padding)),
1440px
);
margin-inline: auto;
}

.section {
position: relative;
padding-block: var(--space-16);
}

.section-compact {
padding-block: var(--space-10);
}

.section-large {
padding-block: var(--space-24);
}

.stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}

.stack-sm {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.stack-lg {
display: flex;
flex-direction: column;
gap: var(--space-8);
}

.row {
display: flex;
align-items: center;
gap: var(--space-4);
}

.row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}

.row-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}

.grid {
display: grid;
gap: var(--space-6);
}

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

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

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

.grid-auto {
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}

.flex {
display: flex;
}

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

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

.flex-center {
display: flex;
align-items: center;
justify-content: center;
}

.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}

.flex-1 {
flex: 1;
min-width: 0;
}

.full-width {
width: 100%;
}

.full-height {
height: 100%;
}

.min-width-0 {
min-width: 0;
}

.content-center {
display: grid;
place-items: center;
}

.flow > * + * {
margin-top: var(--space-4);
}

.flow-lg > * + * {
margin-top: var(--space-8);
}

.gap-2 {
gap: var(--space-2);
}

.gap-3 {
gap: var(--space-3);
}

.gap-4 {
gap: var(--space-4);
}

.gap-6 {
gap: var(--space-6);
}

.gap-8 {
gap: var(--space-8);
}

@media (max-width: 900px) {
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (max-width: 600px) {
.section {
padding-block: var(--space-12);
}

.section-large {
padding-block: var(--space-16);
}

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