@nuvoui/core
Version:
NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.
2,554 lines (2,511 loc) • 828 kB
CSS
/**
* Ensures a value has a unit, adding $default-unit if none exists
* @param {Number|String} $val - The value to check
* @return {String} - The value with units
*/
*,
::before,
::after,
::backdrop,
::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
padding: 0;
}
html {
-moz-text-size-adjust: none; /* stylelint-disable-line */
-webkit-text-size-adjust: none; /* stylelint-disable-line */
text-size-adjust: none;
}
html:focus-within {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
min-height: 100dvh;
text-rendering: optimizespeed;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
button,
input,
label {
line-height: 1.1;
}
img,
picture,
video,
canvas,
svg,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
picture,
video,
svg {
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
cursor: pointer;
}
input:disabled,
button:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
}
ul[role=list],
ol[role=list] {
list-style: none;
margin: 0;
padding: 0;
padding-inline-start: 0;
margin-block: 0;
}
ul[role=list] > li,
ol[role=list] > li {
margin: 0;
padding: 0;
margin-block: 0;
}
a {
text-decoration-skip-ink: auto;
text-decoration: none;
color: inherit;
}
textarea:not([rows]) {
min-height: 10em;
}
:target {
scroll-margin-block: 5ex;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Import variables */
/**
* @description Media query mixins.
* @param {string|number} $breakpoint - The breakpoint value.
* @param {string} $type - The media query type (e.g. 'lg', 'md').
*/
:root {
--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
html {
font-size: 16;
}
body {
font-family: var(--font-family-base);
font-weight: 400;
line-height: 1.5;
color: var(--text-default);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0.5em;
font-family: var(--font-family-heading);
font-weight: 700;
line-height: 1.2;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
p {
margin-bottom: 1rem;
}
small {
font-size: 0.875rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
font-family: var(--font-family-base);
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
button:focus {
outline: none;
}
button:disabled {
background-color: #e0e0e0;
color: #a0a0a0;
cursor: not-allowed;
}
button:not([class*=bg-]) {
background-color: var(--button-bg-color, #007bff);
color: var(--button-text-color, #fff);
}
button:not([class*=bg-]):hover {
background-color: var(--button-bg-color-hover, #0056b3);
}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
textarea {
padding: 0.5rem;
border: 1px solid var(--border);
border-radius: 0.25rem;
width: 100%;
font-family: var(--font-family-base);
transition: border 0.2s ease-in-out;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
textarea:focus {
border-color: var(--link-color);
outline: none;
}
input[type=checkbox],
input[type=radio] {
margin-right: 0.5rem;
}
select {
padding: 0.5rem;
border: 1px solid var(--border);
border-radius: 0.25rem;
width: 100%;
font-family: var(--font-family-base);
transition: border 0.2s ease-in-out;
}
select:focus {
border-color: var(--link-color);
outline: none;
}
blockquote {
margin: 1rem 0;
padding: 0.5rem 1rem;
border-left: 4px solid var(--border);
font-style: italic;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: 1rem 0;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 1rem 0;
}
figcaption {
font-size: 0.875rem;
color: var(--text-muted, #666);
}
a {
transition: color 0.2s ease-in-out;
}
a:not([class*=text-]) {
color: var(--link-color);
}
a:not([class*=text-]):hover {
color: var(--link-hover-color);
}
label[for] {
cursor: pointer;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
code {
font-family: "Courier New", Courier, monospace;
background-color: #f8f8f8;
color: #d63384;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
[data-theme=dark] code {
background-color: #333;
color: #f8f8f2;
}
@media (prefers-color-scheme: dark) {
[data-theme=system] code {
background-color: #333;
color: #f8f8f2;
}
}
.container {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 480px) {
.container {
max-width: 380px;
}
}
@media (min-width: 640px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 668px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 924px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1180px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1436px;
}
}
.container {
padding-top: 1rem;
padding-bottom: 1rem;
}
/**
* @component Flex
* @description Flexbox layout system for creating flexible page layouts
*
* @example
* <div class="flex row between x-center">
* <div class="w-6">Left column (6 units)</div>
* <div class="w-6">Right column (6 units)</div>
* </div>
*
* <div class="flex col@md row@lg">
* <!-- Changes direction based on breakpoint -->
* </div>
*
* @classes
* Base:
* - flex: Creates a flex container
*
* Direction:
* - row: Sets flex-direction to row
* - col: Sets flex-direction to column
* - row-reverse: Reverses row direction
* - col-reverse: Reverses column direction
*
* Alignment:
* - start/end/center: Controls justify-content
* - x-start/x-end/x-center: Controls align-items
*
* Child elements:
* - w-{1-12}: Sets width based on column count
* - grow: Allows item to grow
* - shrink/no-shrink: Controls shrink behavior
*
* @responsive
* All classes support responsive variants using @breakpoint suffix:
* - row@md: Row direction on medium screens and up
* - between@lg: Space-between on large screens
*
* @see grid
*/
/**
* @description Establishes a flex container.
*/
/**
* @description Establishes a flex-inline container.
*/
/**
* @description Sets flex-direction to row.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-direction to row-reverse.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-direction to column.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-direction to column-reverse.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-wrap to wrap.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-wrap to nowrap.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-wrap to wrap-reverse
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to flex-start
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to flex-end
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to center
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to stretch
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to space-between
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to space-around
* @dependencies flex | flex-inline
*/
/**
* @description Sets justify-content to space-evenly
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-items to flex-start - aligns items to the start of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-items to flex-end - aligns items to the end of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-items to center - aligns items to the center of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to flex-start - aligns content to the start of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to flex-end - aligns content to the end of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to center - aligns content to the center of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to space-between - aligns content to the space between the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to space-around - aligns content to the space around the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to auto
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to flex-start
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to flex-end
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to center
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to stretch
* @dependencies flex | flex-inline
*/
/**
* @description Sets align-self to baseline
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-shrink to 1 - allows the item to shrink.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-shrink to 0 - prevents the item from shrinking.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
* @dependencies flex | flex-inline
*/
/**
* @description Sets flex to 0 0 100%
*/
/**
* @description Sets flex to 1 1 auto - allows the item to grow and shrink.
*/
/**
* @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
*/
/**
* @description Sets flex to none - prevents the item from growing.
*/
/**
* @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
*/
/**
* @description Sets how many columns this would take using percentage of VAR.$column-count.
* @param {Number} $size - The number of columns to span.
*/
.flex {
display: flex;
}
.flex.row {
flex-direction: row;
}
.flex.row-reverse {
flex-direction: row-reverse;
}
.flex.col {
flex-direction: column;
}
.flex.col-reverse {
flex-direction: column-reverse;
}
.flex.wrap {
flex-wrap: wrap;
}
.flex.nowrap {
flex-wrap: nowrap;
}
.flex.wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex.start {
justify-content: flex-start;
}
.flex.end {
justify-content: flex-end;
}
.flex.center {
justify-content: center;
}
.flex.stretch {
justify-content: stretch;
}
.flex.between {
justify-content: space-between;
}
.flex.around {
justify-content: space-around;
}
.flex.evenly {
justify-content: space-evenly;
}
.flex.x-start {
align-items: flex-start;
}
.flex.x-end {
align-items: flex-end;
}
.flex.x-center {
align-items: center;
}
.flex.x-baseline {
align-items: baseline;
}
.flex.x-stretch {
align-items: stretch;
}
.flex.x-content-start {
align-content: flex-start;
}
.flex.x-content-end {
align-content: flex-end;
}
.flex.x-content-center {
align-content: center;
}
.flex.x-content-between {
align-content: space-between;
}
.flex.x-content-around {
align-content: space-around;
}
.flex.x-content-evenly {
align-content: space-evenly;
}
.flex.x-content-stretch {
align-content: stretch;
}
.flex > .fill-auto {
flex: 1 1 auto;
}
.flex > .fill-full {
flex: 0 0 100%;
}
.flex > .grow {
flex: 1 1 0%;
}
.flex > .no-grow {
flex: none;
}
.flex > .order-first {
order: -1;
}
.flex > .order-last {
order: 9999;
}
.flex > .order-none {
order: 0;
}
.flex > .shrink {
flex-shrink: 1;
}
.flex > .no-shrink {
flex-shrink: 0;
}
.flex > .shrink-twice {
flex-shrink: 2;
}
.flex > .self-end {
align-self: flex-end;
}
.flex > .self-start {
align-self: flex-start;
}
.flex > .self-center {
align-self: center;
}
.flex > .self-stretch {
align-self: stretch;
}
.flex > .self-baseline {
align-self: baseline;
}
.flex > .self-auto {
align-self: auto;
}
.flex > .fill-1 {
flex: 0 0 8.3333333333%;
}
.flex > .order-1 {
order: 1;
}
.flex > .fill-2 {
flex: 0 0 16.6666666667%;
}
.flex > .order-2 {
order: 2;
}
.flex > .fill-3 {
flex: 0 0 25%;
}
.flex > .order-3 {
order: 3;
}
.flex > .fill-4 {
flex: 0 0 33.3333333333%;
}
.flex > .order-4 {
order: 4;
}
.flex > .fill-5 {
flex: 0 0 41.6666666667%;
}
.flex > .order-5 {
order: 5;
}
.flex > .fill-6 {
flex: 0 0 50%;
}
.flex > .order-6 {
order: 6;
}
.flex > .fill-7 {
flex: 0 0 58.3333333333%;
}
.flex > .order-7 {
order: 7;
}
.flex > .fill-8 {
flex: 0 0 66.6666666667%;
}
.flex > .order-8 {
order: 8;
}
.flex > .fill-9 {
flex: 0 0 75%;
}
.flex > .order-9 {
order: 9;
}
.flex > .fill-10 {
flex: 0 0 83.3333333333%;
}
.flex > .order-10 {
order: 10;
}
.flex > .fill-11 {
flex: 0 0 91.6666666667%;
}
.flex > .order-11 {
order: 11;
}
.flex > .fill-12 {
flex: 0 0 100%;
}
.flex > .order-12 {
order: 12;
}
@media (min-width: 480px) {
.flex.row\@xs {
flex-direction: row;
}
.flex.row-reverse\@xs {
flex-direction: row-reverse;
}
.flex.col\@xs {
flex-direction: column;
}
.flex.col-reverse\@xs {
flex-direction: column-reverse;
}
.flex.wrap\@xs {
flex-wrap: wrap;
}
.flex.nowrap\@xs {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@xs {
flex-wrap: wrap-reverse;
}
.flex.start\@xs {
justify-content: flex-start;
}
.flex.end\@xs {
justify-content: flex-end;
}
.flex.center\@xs {
justify-content: center;
}
.flex.between\@xs {
justify-content: space-between;
}
.flex.stretch\@xs {
justify-content: stretch;
}
.flex.around\@xs {
justify-content: space-around;
}
.flex.evenly\@xs {
justify-content: space-evenly;
}
.flex.x-start\@xs {
align-items: flex-start;
}
.flex.x-end\@xs {
align-items: flex-end;
}
.flex.x-center\@xs {
align-items: center;
}
.flex.x-baseline\@xs {
align-items: baseline;
}
.flex.x-stretch\@xs {
align-items: stretch;
}
.flex.x-content-start\@xs {
align-content: flex-start;
}
.flex.x-content-end\@xs {
align-content: flex-end;
}
.flex.x-content-center\@xs {
align-content: center;
}
.flex.x-content-between\@xs {
align-content: space-between;
}
.flex.x-content-around\@xs {
align-content: space-around;
}
.flex.x-content-evenly\@xs {
align-content: space-evenly;
}
.flex.x-content-stretch\@xs {
align-content: stretch;
}
.flex > .fill-auto\@xs {
flex: 1 1 auto;
}
.flex > .fill-full\@xs {
flex: 0 0 100%;
}
.flex > .grow\@xs {
flex: 1 1 0%;
}
.flex > .no-grow\@xs {
flex: none;
}
.flex > .order-first\@xs {
order: -1;
}
.flex > .order-last\@xs {
order: 9999;
}
.flex > .order-none\@xs {
order: 0;
}
.flex > .shrink\@xs {
flex-shrink: 1;
}
.flex > .no-shrink\@xs {
flex-shrink: 0;
}
.flex > .shrink-twice\@xs {
flex-shrink: 2;
}
.flex > .self-end\@xs {
align-self: flex-end;
}
.flex > .self-start\@xs {
align-self: flex-start;
}
.flex > .self-center\@xs {
align-self: center;
}
.flex > .self-stretch\@xs {
align-self: stretch;
}
.flex > .self-baseline\@xs {
align-self: baseline;
}
.flex > .self-auto\@xs {
align-self: auto;
}
.flex > .fill-1\@xs {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@xs {
order: 1;
}
.flex > .fill-2\@xs {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@xs {
order: 2;
}
.flex > .fill-3\@xs {
flex: 0 0 25%;
}
.flex > .order-3\@xs {
order: 3;
}
.flex > .fill-4\@xs {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@xs {
order: 4;
}
.flex > .fill-5\@xs {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@xs {
order: 5;
}
.flex > .fill-6\@xs {
flex: 0 0 50%;
}
.flex > .order-6\@xs {
order: 6;
}
.flex > .fill-7\@xs {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@xs {
order: 7;
}
.flex > .fill-8\@xs {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@xs {
order: 8;
}
.flex > .fill-9\@xs {
flex: 0 0 75%;
}
.flex > .order-9\@xs {
order: 9;
}
.flex > .fill-10\@xs {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@xs {
order: 10;
}
.flex > .fill-11\@xs {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@xs {
order: 11;
}
.flex > .fill-12\@xs {
flex: 0 0 100%;
}
.flex > .order-12\@xs {
order: 12;
}
}
@media (min-width: 640px) {
.flex.row\@sm {
flex-direction: row;
}
.flex.row-reverse\@sm {
flex-direction: row-reverse;
}
.flex.col\@sm {
flex-direction: column;
}
.flex.col-reverse\@sm {
flex-direction: column-reverse;
}
.flex.wrap\@sm {
flex-wrap: wrap;
}
.flex.nowrap\@sm {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@sm {
flex-wrap: wrap-reverse;
}
.flex.start\@sm {
justify-content: flex-start;
}
.flex.end\@sm {
justify-content: flex-end;
}
.flex.center\@sm {
justify-content: center;
}
.flex.between\@sm {
justify-content: space-between;
}
.flex.stretch\@sm {
justify-content: stretch;
}
.flex.around\@sm {
justify-content: space-around;
}
.flex.evenly\@sm {
justify-content: space-evenly;
}
.flex.x-start\@sm {
align-items: flex-start;
}
.flex.x-end\@sm {
align-items: flex-end;
}
.flex.x-center\@sm {
align-items: center;
}
.flex.x-baseline\@sm {
align-items: baseline;
}
.flex.x-stretch\@sm {
align-items: stretch;
}
.flex.x-content-start\@sm {
align-content: flex-start;
}
.flex.x-content-end\@sm {
align-content: flex-end;
}
.flex.x-content-center\@sm {
align-content: center;
}
.flex.x-content-between\@sm {
align-content: space-between;
}
.flex.x-content-around\@sm {
align-content: space-around;
}
.flex.x-content-evenly\@sm {
align-content: space-evenly;
}
.flex.x-content-stretch\@sm {
align-content: stretch;
}
.flex > .fill-auto\@sm {
flex: 1 1 auto;
}
.flex > .fill-full\@sm {
flex: 0 0 100%;
}
.flex > .grow\@sm {
flex: 1 1 0%;
}
.flex > .no-grow\@sm {
flex: none;
}
.flex > .order-first\@sm {
order: -1;
}
.flex > .order-last\@sm {
order: 9999;
}
.flex > .order-none\@sm {
order: 0;
}
.flex > .shrink\@sm {
flex-shrink: 1;
}
.flex > .no-shrink\@sm {
flex-shrink: 0;
}
.flex > .shrink-twice\@sm {
flex-shrink: 2;
}
.flex > .self-end\@sm {
align-self: flex-end;
}
.flex > .self-start\@sm {
align-self: flex-start;
}
.flex > .self-center\@sm {
align-self: center;
}
.flex > .self-stretch\@sm {
align-self: stretch;
}
.flex > .self-baseline\@sm {
align-self: baseline;
}
.flex > .self-auto\@sm {
align-self: auto;
}
.flex > .fill-1\@sm {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@sm {
order: 1;
}
.flex > .fill-2\@sm {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@sm {
order: 2;
}
.flex > .fill-3\@sm {
flex: 0 0 25%;
}
.flex > .order-3\@sm {
order: 3;
}
.flex > .fill-4\@sm {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@sm {
order: 4;
}
.flex > .fill-5\@sm {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@sm {
order: 5;
}
.flex > .fill-6\@sm {
flex: 0 0 50%;
}
.flex > .order-6\@sm {
order: 6;
}
.flex > .fill-7\@sm {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@sm {
order: 7;
}
.flex > .fill-8\@sm {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@sm {
order: 8;
}
.flex > .fill-9\@sm {
flex: 0 0 75%;
}
.flex > .order-9\@sm {
order: 9;
}
.flex > .fill-10\@sm {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@sm {
order: 10;
}
.flex > .fill-11\@sm {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@sm {
order: 11;
}
.flex > .fill-12\@sm {
flex: 0 0 100%;
}
.flex > .order-12\@sm {
order: 12;
}
}
@media (min-width: 768px) {
.flex.row\@md {
flex-direction: row;
}
.flex.row-reverse\@md {
flex-direction: row-reverse;
}
.flex.col\@md {
flex-direction: column;
}
.flex.col-reverse\@md {
flex-direction: column-reverse;
}
.flex.wrap\@md {
flex-wrap: wrap;
}
.flex.nowrap\@md {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@md {
flex-wrap: wrap-reverse;
}
.flex.start\@md {
justify-content: flex-start;
}
.flex.end\@md {
justify-content: flex-end;
}
.flex.center\@md {
justify-content: center;
}
.flex.between\@md {
justify-content: space-between;
}
.flex.stretch\@md {
justify-content: stretch;
}
.flex.around\@md {
justify-content: space-around;
}
.flex.evenly\@md {
justify-content: space-evenly;
}
.flex.x-start\@md {
align-items: flex-start;
}
.flex.x-end\@md {
align-items: flex-end;
}
.flex.x-center\@md {
align-items: center;
}
.flex.x-baseline\@md {
align-items: baseline;
}
.flex.x-stretch\@md {
align-items: stretch;
}
.flex.x-content-start\@md {
align-content: flex-start;
}
.flex.x-content-end\@md {
align-content: flex-end;
}
.flex.x-content-center\@md {
align-content: center;
}
.flex.x-content-between\@md {
align-content: space-between;
}
.flex.x-content-around\@md {
align-content: space-around;
}
.flex.x-content-evenly\@md {
align-content: space-evenly;
}
.flex.x-content-stretch\@md {
align-content: stretch;
}
.flex > .fill-auto\@md {
flex: 1 1 auto;
}
.flex > .fill-full\@md {
flex: 0 0 100%;
}
.flex > .grow\@md {
flex: 1 1 0%;
}
.flex > .no-grow\@md {
flex: none;
}
.flex > .order-first\@md {
order: -1;
}
.flex > .order-last\@md {
order: 9999;
}
.flex > .order-none\@md {
order: 0;
}
.flex > .shrink\@md {
flex-shrink: 1;
}
.flex > .no-shrink\@md {
flex-shrink: 0;
}
.flex > .shrink-twice\@md {
flex-shrink: 2;
}
.flex > .self-end\@md {
align-self: flex-end;
}
.flex > .self-start\@md {
align-self: flex-start;
}
.flex > .self-center\@md {
align-self: center;
}
.flex > .self-stretch\@md {
align-self: stretch;
}
.flex > .self-baseline\@md {
align-self: baseline;
}
.flex > .self-auto\@md {
align-self: auto;
}
.flex > .fill-1\@md {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@md {
order: 1;
}
.flex > .fill-2\@md {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@md {
order: 2;
}
.flex > .fill-3\@md {
flex: 0 0 25%;
}
.flex > .order-3\@md {
order: 3;
}
.flex > .fill-4\@md {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@md {
order: 4;
}
.flex > .fill-5\@md {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@md {
order: 5;
}
.flex > .fill-6\@md {
flex: 0 0 50%;
}
.flex > .order-6\@md {
order: 6;
}
.flex > .fill-7\@md {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@md {
order: 7;
}
.flex > .fill-8\@md {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@md {
order: 8;
}
.flex > .fill-9\@md {
flex: 0 0 75%;
}
.flex > .order-9\@md {
order: 9;
}
.flex > .fill-10\@md {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@md {
order: 10;
}
.flex > .fill-11\@md {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@md {
order: 11;
}
.flex > .fill-12\@md {
flex: 0 0 100%;
}
.flex > .order-12\@md {
order: 12;
}
}
@media (min-width: 1024px) {
.flex.row\@lg {
flex-direction: row;
}
.flex.row-reverse\@lg {
flex-direction: row-reverse;
}
.flex.col\@lg {
flex-direction: column;
}
.flex.col-reverse\@lg {
flex-direction: column-reverse;
}
.flex.wrap\@lg {
flex-wrap: wrap;
}
.flex.nowrap\@lg {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@lg {
flex-wrap: wrap-reverse;
}
.flex.start\@lg {
justify-content: flex-start;
}
.flex.end\@lg {
justify-content: flex-end;
}
.flex.center\@lg {
justify-content: center;
}
.flex.between\@lg {
justify-content: space-between;
}
.flex.stretch\@lg {
justify-content: stretch;
}
.flex.around\@lg {
justify-content: space-around;
}
.flex.evenly\@lg {
justify-content: space-evenly;
}
.flex.x-start\@lg {
align-items: flex-start;
}
.flex.x-end\@lg {
align-items: flex-end;
}
.flex.x-center\@lg {
align-items: center;
}
.flex.x-baseline\@lg {
align-items: baseline;
}
.flex.x-stretch\@lg {
align-items: stretch;
}
.flex.x-content-start\@lg {
align-content: flex-start;
}
.flex.x-content-end\@lg {
align-content: flex-end;
}
.flex.x-content-center\@lg {
align-content: center;
}
.flex.x-content-between\@lg {
align-content: space-between;
}
.flex.x-content-around\@lg {
align-content: space-around;
}
.flex.x-content-evenly\@lg {
align-content: space-evenly;
}
.flex.x-content-stretch\@lg {
align-content: stretch;
}
.flex > .fill-auto\@lg {
flex: 1 1 auto;
}
.flex > .fill-full\@lg {
flex: 0 0 100%;
}
.flex > .grow\@lg {
flex: 1 1 0%;
}
.flex > .no-grow\@lg {
flex: none;
}
.flex > .order-first\@lg {
order: -1;
}
.flex > .order-last\@lg {
order: 9999;
}
.flex > .order-none\@lg {
order: 0;
}
.flex > .shrink\@lg {
flex-shrink: 1;
}
.flex > .no-shrink\@lg {
flex-shrink: 0;
}
.flex > .shrink-twice\@lg {
flex-shrink: 2;
}
.flex > .self-end\@lg {
align-self: flex-end;
}
.flex > .self-start\@lg {
align-self: flex-start;
}
.flex > .self-center\@lg {
align-self: center;
}
.flex > .self-stretch\@lg {
align-self: stretch;
}
.flex > .self-baseline\@lg {
align-self: baseline;
}
.flex > .self-auto\@lg {
align-self: auto;
}
.flex > .fill-1\@lg {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@lg {
order: 1;
}
.flex > .fill-2\@lg {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@lg {
order: 2;
}
.flex > .fill-3\@lg {
flex: 0 0 25%;
}
.flex > .order-3\@lg {
order: 3;
}
.flex > .fill-4\@lg {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@lg {
order: 4;
}
.flex > .fill-5\@lg {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@lg {
order: 5;
}
.flex > .fill-6\@lg {
flex: 0 0 50%;
}
.flex > .order-6\@lg {
order: 6;
}
.flex > .fill-7\@lg {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@lg {
order: 7;
}
.flex > .fill-8\@lg {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@lg {
order: 8;
}
.flex > .fill-9\@lg {
flex: 0 0 75%;
}
.flex > .order-9\@lg {
order: 9;
}
.flex > .fill-10\@lg {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@lg {
order: 10;
}
.flex > .fill-11\@lg {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@lg {
order: 11;
}
.flex > .fill-12\@lg {
flex: 0 0 100%;
}
.flex > .order-12\@lg {
order: 12;
}
}
@media (min-width: 1280px) {
.flex.row\@xl {
flex-direction: row;
}
.flex.row-reverse\@xl {
flex-direction: row-reverse;
}
.flex.col\@xl {
flex-direction: column;
}
.flex.col-reverse\@xl {
flex-direction: column-reverse;
}
.flex.wrap\@xl {
flex-wrap: wrap;
}
.flex.nowrap\@xl {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@xl {
flex-wrap: wrap-reverse;
}
.flex.start\@xl {
justify-content: flex-start;
}
.flex.end\@xl {
justify-content: flex-end;
}
.flex.center\@xl {
justify-content: center;
}
.flex.between\@xl {
justify-content: space-between;
}
.flex.stretch\@xl {
justify-content: stretch;
}
.flex.around\@xl {
justify-content: space-around;
}
.flex.evenly\@xl {
justify-content: space-evenly;
}
.flex.x-start\@xl {
align-items: flex-start;
}
.flex.x-end\@xl {
align-items: flex-end;
}
.flex.x-center\@xl {
align-items: center;
}
.flex.x-baseline\@xl {
align-items: baseline;
}
.flex.x-stretch\@xl {
align-items: stretch;
}
.flex.x-content-start\@xl {
align-content: flex-start;
}
.flex.x-content-end\@xl {
align-content: flex-end;
}
.flex.x-content-center\@xl {
align-content: center;
}
.flex.x-content-between\@xl {
align-content: space-between;
}
.flex.x-content-around\@xl {
align-content: space-around;
}
.flex.x-content-evenly\@xl {
align-content: space-evenly;
}
.flex.x-content-stretch\@xl {
align-content: stretch;
}
.flex > .fill-auto\@xl {
flex: 1 1 auto;
}
.flex > .fill-full\@xl {
flex: 0 0 100%;
}
.flex > .grow\@xl {
flex: 1 1 0%;
}
.flex > .no-grow\@xl {
flex: none;
}
.flex > .order-first\@xl {
order: -1;
}
.flex > .order-last\@xl {
order: 9999;
}
.flex > .order-none\@xl {
order: 0;
}
.flex > .shrink\@xl {
flex-shrink: 1;
}
.flex > .no-shrink\@xl {
flex-shrink: 0;
}
.flex > .shrink-twice\@xl {
flex-shrink: 2;
}
.flex > .self-end\@xl {
align-self: flex-end;
}
.flex > .self-start\@xl {
align-self: flex-start;
}
.flex > .self-center\@xl {
align-self: center;
}
.flex > .self-stretch\@xl {
align-self: stretch;
}
.flex > .self-baseline\@xl {
align-self: baseline;
}
.flex > .self-auto\@xl {
align-self: auto;
}
.flex > .fill-1\@xl {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@xl {
order: 1;
}
.flex > .fill-2\@xl {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@xl {
order: 2;
}
.flex > .fill-3\@xl {
flex: 0 0 25%;
}
.flex > .order-3\@xl {
order: 3;
}
.flex > .fill-4\@xl {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@xl {
order: 4;
}
.flex > .fill-5\@xl {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@xl {
order: 5;
}
.flex > .fill-6\@xl {
flex: 0 0 50%;
}
.flex > .order-6\@xl {
order: 6;
}
.flex > .fill-7\@xl {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@xl {
order: 7;
}
.flex > .fill-8\@xl {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@xl {
order: 8;
}
.flex > .fill-9\@xl {
flex: 0 0 75%;
}
.flex > .order-9\@xl {
order: 9;
}
.flex > .fill-10\@xl {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@xl {
order: 10;
}
.flex > .fill-11\@xl {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@xl {
order: 11;
}
.flex > .fill-12\@xl {
flex: 0 0 100%;
}
.flex > .order-12\@xl {
order: 12;
}
}
@media (min-width: 1536px) {
.flex.row\@2xl {
flex-direction: row;
}
.flex.row-reverse\@2xl {
flex-direction: row-reverse;
}
.flex.col\@2xl {
flex-direction: column;
}
.flex.col-reverse\@2xl {
flex-direction: column-reverse;
}
.flex.wrap\@2xl {
flex-wrap: wrap;
}
.flex.nowrap\@2xl {
flex-wrap: nowrap;
}
.flex.wrap-reverse\@2xl {
flex-wrap: wrap-reverse;
}
.flex.start\@2xl {
justify-content: flex-start;
}
.flex.end\@2xl {
justify-content: flex-end;
}
.flex.center\@2xl {
justify-content: center;
}
.flex.between\@2xl {
justify-content: space-between;
}
.flex.stretch\@2xl {
justify-content: stretch;
}
.flex.around\@2xl {
justify-content: space-around;
}
.flex.evenly\@2xl {
justify-content: space-evenly;
}
.flex.x-start\@2xl {
align-items: flex-start;
}
.flex.x-end\@2xl {
align-items: flex-end;
}
.flex.x-center\@2xl {
align-items: center;
}
.flex.x-baseline\@2xl {
align-items: baseline;
}
.flex.x-stretch\@2xl {
align-items: stretch;
}
.flex.x-content-start\@2xl {
align-content: flex-start;
}
.flex.x-content-end\@2xl {
align-content: flex-end;
}
.flex.x-content-center\@2xl {
align-content: center;
}
.flex.x-content-between\@2xl {
align-content: space-between;
}
.flex.x-content-around\@2xl {
align-content: space-around;
}
.flex.x-content-evenly\@2xl {
align-content: space-evenly;
}
.flex.x-content-stretch\@2xl {
align-content: stretch;
}
.flex > .fill-auto\@2xl {
flex: 1 1 auto;
}
.flex > .fill-full\@2xl {
flex: 0 0 100%;
}
.flex > .grow\@2xl {
flex: 1 1 0%;
}
.flex > .no-grow\@2xl {
flex: none;
}
.flex > .order-first\@2xl {
order: -1;
}
.flex > .order-last\@2xl {
order: 9999;
}
.flex > .order-none\@2xl {
order: 0;
}
.flex > .shrink\@2xl {
flex-shrink: 1;
}
.flex > .no-shrink\@2xl {
flex-shrink: 0;
}
.flex > .shrink-twice\@2xl {
flex-shrink: 2;
}
.flex > .self-end\@2xl {
align-self: flex-end;
}
.flex > .self-start\@2xl {
align-self: flex-start;
}
.flex > .self-center\@2xl {
align-self: center;
}
.flex > .self-stretch\@2xl {
align-self: stretch;
}
.flex > .self-baseline\@2xl {
align-self: baseline;
}
.flex > .self-auto\@2xl {
align-self: auto;
}
.flex > .fill-1\@2xl {
flex: 0 0 8.3333333333%;
}
.flex > .order-1\@2xl {
order: 1;
}
.flex > .fill-2\@2xl {
flex: 0 0 16.6666666667%;
}
.flex > .order-2\@2xl {
order: 2;
}
.flex > .fill-3\@2xl {
flex: 0 0 25%;
}
.flex > .order-3\@2xl {
order: 3;
}
.flex > .fill-4\@2xl {
flex: 0 0 33.3333333333%;
}
.flex > .order-4\@2xl {
order: 4;
}
.flex > .fill-5\@2xl {
flex: 0 0 41.6666666667%;
}
.flex > .order-5\@2xl {
order: 5;
}
.flex > .fill-6\@2xl {
flex: 0 0 50%;
}
.flex > .order-6\@2xl {
order: 6;
}
.flex > .fill-7\@2xl {
flex: 0 0 58.3333333333%;
}
.flex > .order-7\@2xl {
order: 7;
}
.flex > .fill-8\@2xl {
flex: 0 0 66.6666666667%;
}
.flex > .order-8\@2xl {
order: 8;
}
.flex > .fill-9\@2xl {
flex: 0 0 75%;
}
.flex > .order-9\@2xl {
order: 9;
}
.flex > .fill-10\@2xl {
flex: 0 0 83.3333333333%;
}
.flex > .order-10\@2xl {
order: 10;
}
.flex > .fill-11\@2xl {
flex: 0 0 91.6666666667%;
}
.flex > .order-11\@2xl {
order: 11;
}
.flex > .fill-12\@2xl {
flex: 0 0 100%;
}
.flex > .order-12\@2xl {
order: 12;
}
}
/**
* @description Establishes a grid container.
*/
/**
* @description Establishes a inline-grid container.
*/
/**
* @description Establishes a grid container with a specified number of columns.
* @param {number} $count - The number of columns.
/// EXAMPLE USAGE
.custom-grid {
display: grid;
@include cols-custom("1fr_auto_1fr");
}
*/
/**
* @description justify-items container.
* @param {string} $value - The value for the justify-items property.
*/
/**
* @description Establishes a align-items container.
* @param {string} $value - The value for the align-items property.
*/
/**
* @description Establishes a place-items container.
* @param {string} $value - The value for the place-items property.
*/
.grid {
display: grid;
}
.grid.inline {
display: inline-grid;
}
.grid.auto-fit-xs {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid.auto-fill-xs {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.grid.auto-fit-sm {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid.auto-fill-sm {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.grid.auto-fit-md {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid.auto-fill-md {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grid.auto-fit-lg {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.grid.auto-fill-lg {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.grid.auto-fit-xl {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.grid.auto-fill-xl {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.grid.flow-row {
grid-auto-flow: row;
}
.grid.flow-col {
grid-auto-flow: column;
}
.grid.flow-dense {
grid-auto-flow: dense;
}
.grid.cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7 {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8 {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9 {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10 {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11 {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12 {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
@media (min-width: 480px) {
.grid.cols-1\@xs {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@xs {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@xs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@xs {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@xs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@xs {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@xs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@xs {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@xs {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@xs {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@xs {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@xs {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@xs {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@xs {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@xs {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@xs {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@xs {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@xs {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10\@xs {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10\@xs {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11\@xs {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11\@xs {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12\@xs {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12\@xs {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 640px) {
.grid.cols-1\@sm {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@sm {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@sm {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@sm {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@sm {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@sm {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@sm {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@sm {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@sm {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@sm {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@sm {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@sm {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@sm {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@sm {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@sm {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@sm {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@sm {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@sm {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10\@sm {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10\@sm {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11\@sm {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11\@sm {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12\@sm {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12\@sm {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.grid.cols-1\@md {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@md {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@md {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@md {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@md {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@md {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@md {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@md {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@md {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@md {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@md {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@md {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@md {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@md {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@md {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@md {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@md {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@md {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10\@md {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10\@md {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11\@md {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11\@md {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12\@md {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12\@md {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.grid.cols-1\@lg {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@lg {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@lg {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@lg {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@lg {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@lg {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@lg {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@lg {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@lg {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@lg {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@lg {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@lg {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@lg {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@lg {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@lg {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@lg {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@lg {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@lg {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10\@lg {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10\@lg {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11\@lg {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11\@lg {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12\@lg {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12\@lg {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.grid.cols-1\@xl {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@xl {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@xl {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@xl {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@xl {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@xl {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@xl {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@xl {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@xl {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@xl {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@xl {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@xl {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@xl {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@xl {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@xl {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@xl {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@xl {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@xl {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.cols-10\@xl {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid.rows-10\@xl {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid.cols-11\@xl {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid.rows-11\@xl {
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid.cols-12\@xl {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid.rows-12\@xl {
grid-template-rows: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.grid.cols-1\@2xl {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid.rows-1\@2xl {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid.cols-2\@2xl {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.rows-2\@2xl {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid.cols-3\@2xl {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.rows-3\@2xl {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid.cols-4\@2xl {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.rows-4\@2xl {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid.cols-5\@2xl {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.rows-5\@2xl {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid.cols-6\@2xl {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.rows-6\@2xl {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid.cols-7\@2xl {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid.rows-7\@2xl {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid.cols-8\@2xl {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid.rows-8\@2xl {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid.cols-9\@2xl {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid.rows-9\@2xl {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid.c