:root { --bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1536px; --container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1050px;
--container-2xl: 1050px; --space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem; --container-padding: 1rem;
} .niriv-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
} @media (min-width: 640px) {
:root {
--container-padding: 1.5rem;
}
.niriv-container {
max-width: var(--container-sm);
}
}
@media (min-width: 768px) {
:root {
--container-padding: 2rem;
}
.niriv-container {
max-width: var(--container-md);
}
}
@media (min-width: 1024px) {
.niriv-container {
max-width: var(--container-lg);
}
}
@media (min-width: 1050px) {
.niriv-container {
max-width: var(--container-xl);
}
} .niriv-container-fluid {
width: 100%;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
} .niriv-space-y > * + * {
margin-top: var(--space-sm);
}
.niriv-space-y-xs > * + * {
margin-top: var(--space-xs);
}
.niriv-space-y-md > * + * {
margin-top: var(--space-md);
}
.niriv-space-y-lg > * + * {
margin-top: var(--space-lg);
}
.niriv-space-y-xl > * + * {
margin-top: var(--space-xl);
} @media (min-width: 768px) {
.md\:niriv-space-y-lg > * + * {
margin-top: var(--space-lg);
}
.md\:niriv-space-y-xl > * + * {
margin-top: var(--space-xl);
}
}
@media (min-width: 1024px) {
.lg\:niriv-space-y-xl > * + * {
margin-top: var(--space-xl);
}
.lg\:niriv-space-y-2xl > * + * {
margin-top: var(--space-2xl);
}
} .niriv-grid {
display: grid;
gap: var(--space-sm);
}
.niriv-grid-1 {
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.sm\:niriv-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.sm\:niriv-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.md\:niriv-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.md\:niriv-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.md\:niriv-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.lg\:niriv-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.lg\:niriv-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.lg\:niriv-grid-5 {
grid-template-columns: repeat(5, 1fr);
}
} .niriv-flex {
display: flex;
}
.niriv-flex-col {
flex-direction: column;
}
.niriv-flex-wrap {
flex-wrap: wrap;
}
.niriv-items-center {
align-items: center;
}
.niriv-justify-center {
justify-content: center;
}
.niriv-justify-between {
justify-content: space-between;
}
@media (min-width: 768px) {
.md\:niriv-flex-row {
flex-direction: row;
}
.md\:niriv-items-start {
align-items: flex-start;
}
} .niriv-w-full {
width: 100%;
}
.niriv-w-auto {
width: auto;
}
@media (min-width: 768px) {
.md\:niriv-w-1\/2 {
width: 50%;
}
.md\:niriv-w-1\/3 {
width: 33.333333%;
}
.md\:niriv-w-2\/3 {
width: 66.666667%;
}
}
@media (min-width: 1024px) {
.lg\:niriv-w-1\/4 {
width: 25%;
}
.lg\:niriv-w-3\/4 {
width: 75%;
}
} .niriv-hidden {
display: none;
}
@media (min-width: 640px) {
.sm\:niriv-block {
display: block;
}
.sm\:niriv-hidden {
display: none;
}
}
@media (min-width: 768px) {
.md\:niriv-block {
display: block;
}
.md\:niriv-hidden {
display: none;
}
.md\:niriv-flex {
display: flex;
}
}
@media (min-width: 1024px) {
.lg\:niriv-block {
display: block;
}
.lg\:niriv-hidden {
display: none;
}
}