.wrz-shell {
    min-height: 100vh;
}

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

.wrz-page {
    padding-block:
        clamp(
            var(--wrz-space-8),
            5vw,
            var(--wrz-space-16)
        );
}

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

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

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

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

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

.wrz-auth-layout {
    display: grid;
    min-height: 100vh;
    align-items: center;
    padding:
        clamp(
            var(--wrz-space-6),
            5vw,
            var(--wrz-space-16)
        );
}

.wrz-auth-layout__content {
    width: min(100%, 520px);
    margin-inline: auto;
}

.wrz-account-layout,
.wrz-staff-layout {
    width: min(
        calc(100% - 2rem),
        var(--wrz-container-max)
    );
    margin-inline: auto;
    padding-block: var(--wrz-space-8);
}

@media (max-width: 900px) {
    .wrz-grid--2,
    .wrz-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .wrz-container,
    .wrz-account-layout,
    .wrz-staff-layout {
        width: min(
            calc(100% - 1rem),
            var(--wrz-container-max)
        );
    }

    .wrz-page {
        padding-block: var(--wrz-space-8);
    }
}