/* Common Classes */

.cg3-h100 {
    height: 100%;
}
.cg3-h100vh {
    height: 100vh;
}
.cg3-minh100vh {
    min-height: 100vh;
}
.cg3-w100 {
    width: 100%;
}
.cg3-maxw100 {
    max-width: 100%;
}

/* overflow */

.cg3-overflow-y-auto {
    overflow-y: auto;
}
.cg3-overflow-y-hidden {
    overflow-y: hidden;
}

/* Position */

.cg3-fixed {
    position: fixed;
}
.cg3-relative {
    position: relative;
}
.cg3-absolute {
    position: absolute;
}
.cg3-sticky-t {
    position: sticky;
    top: 0;
}
.cg3-sticky-b {
    position: sticky;
    bottom: 0;
}

/* flex */

.cg3-flex-row {
    display: flex;
    flex-direction: row;
}
.cg3-flex-col {
    display: flex;
    flex-direction: column;
}
.cg3-flex-grow {
    flex-grow: 1;
}
.cg3-flex-nowrap {
    flex-wrap: nowrap;
}
.cg3-flex-end {
    justify-content: flex-end;
}
.cg3-flex-between {
    justify-content: space-between;
}
.cg3-flex-center {
    justify-content: center;
}
.cg3-flex-center-y {
    align-items: center;
}

/* visibility */

@media (max-width: 1023px) {
    .cg3-hidden-max-s {
        display: none;
    }
}

@media (min-width: 1024px) {
    .cg3-hidden-min-m {
        display: none;
    }
}

/* gap */

.cg3-gap-0_25 {
    gap: var(--cg3-spacing-quarter);
}
.cg3-gap-0_5 {
    gap: var(--cg3-spacing-half);
}
.cg3-gap {
    gap: var(--cg3-spacing);
}
.cg3-gap-1_5 {
    gap: var(--cg3-spacing-one-and-half);
}
.cg3-gap-2 {
    gap: var(--cg3-spacing-double);
}

/* text */

.cg3-font-1 {
    font-size: var(--cg3-font-size-1);
}
.cg3-font-2 {
    font-size: var(--cg3-font-size-2);
}
.cg3-font-3 {
    font-size: var(--cg3-font-size-3);
}
.cg3-font-4 {
    font-size: var(--cg3-font-size-4);
}
.cg3-font-5 {
    font-size: var(--cg3-font-size-5);
}
.cg3-font-6 {
    font-size: var(--cg3-font-size-6);
}

.cg3-font-light {
    font-weight: 300;
}
.cg3-font-regular {
    font-weight: 400;
}
.cg3-font-medium {
    font-weight: 500;
}
.cg3-font-bold {
    font-weight: 700;
}

.cg3-plain-ul {
    margin: 0;
    padding: 0;
}
.cg3-plain-ul li {
    margin: 0;
    list-style: none;
}

.cg3-plain-a {
    text-decoration: none;
}
.cg3-plain-a:hover {
    text-decoration: underline;
}

.cg3-plain-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.cg3-text-color {
    color: var(--cg3-color-text-primary);
}
.cg3-text-color-inverse {
    color: var(--cg3-color-text-inverse);
}

.cg3-bg {
    background-color: var(--cg3-color-monochrome-white);
    color: var(--cg3-color-text-primary);
}
.cg3-bg-subtle {
    background-color: var(--cg3-color-gray-25);
    color: var(--cg3-color-text-primary);
}
.cg3-bg-strong {
    background-color: var(--cg3-color-gray-750);
    color: var(--cg3-color-text-inverse);
}

.cg3-bg-red {
    background-color: red;
}
.cg3-bg-blue {
    background-color: blue;
}
.cg3-bg-green {
    background-color: green;
}
.cg3-bg-test {
    background: rgba(255, 0, 0, 0.1);
}
.cg3-bg-test-1 {
    background: rgba(0, 255, 0, 0.1);
}

/* fixed container paddings */
.cg3-pad-x-fixed {
    padding-inline: var(--cg3-spacing);
}
@media (min-width: 600px) {
    .cg3-pad-x-fixed {
        padding-inline: var(--cg3-spacing-double);
    }
}
@media (min-width: 1024px) {
    .cg3-pad-x-fixed {
        padding-inline: calc(var(--cg3-spacing) * 3);
    }
}
@media (min-width: 1440px) {
    .cg3-pad-x-fixed {
        padding-inline: calc(var(--cg3-spacing) * 3.5);
    }
}
@media (min-width: 1600px) {
    .cg3-pad-x-fixed {
        padding-inline: calc(var(--cg3-spacing) * 5);
    }
}
@media (min-width: 1920px) {
    .cg3-pad-x-fixed {
        max-width: calc(100vw - 336px); /* 100vw -  2*168(21rem) */
        padding-inline: calc(50vw - 0.5 * 1584px); /* 1920 - 2*168 = 1584px = 99rem */
    }
}

/* fluid container paddings */
.cg3-pad-x-fluid {
    padding-inline: var(--cg3-spacing);
}
@media (min-width: 1024px) {
    .cg3-pad-x-fluid {
        padding-inline: var(--cg3-spacing-double);
    }
}

/* fluid container margins */
.cg3-mar-x-fluid {
    margin-inline: var(--cg3-spacing);
}
@media (min-width: 1024px) {
    .cg3-mar-x-fluid {
        margin-inline: var(--cg3-spacing-double);
    }
}

/* padding */

.cg3-pad-0 {
    padding: 0;
}

.cg3-pad {
    padding: var(--cg3-spacing);
}
.cg3-pad-x {
    padding-inline: var(--cg3-spacing);
}
.cg3-pad-y {
    padding-block: var(--cg3-spacing);
}
.cg3-pad-t {
    padding-top: var(--cg3-spacing);
}
.cg3-pad-r {
    padding-right: var(--cg3-spacing);
}
.cg3-pad-l {
    padding-left: var(--cg3-spacing);
}
.cg3-pad-b {
    padding-bottom: var(--cg3-spacing);
}

.cg3-pad-0_25 {
    padding: var(--cg3-spacing-quarter);
}

.cg3-pad-0_5 {
    padding: var(--cg3-spacing-half);
}
.cg3-pad-x-0_5 {
    padding-inline: var(--cg3-spacing-half);
}
.cg3-pad-y-0_5 {
    padding-block: var(--cg3-spacing-half);
}
.cg3-pad-t-0_5 {
    padding-top: var(--cg3-spacing-half);
}
.cg3-pad-r-0_5 {
    padding-right: var(--cg3-spacing-half);
}
.cg3-pad-l-0_5 {
    padding-left: var(--cg3-spacing-half);
}
.cg3-pad-b-0_5 {
    padding-bottom: var(--cg3-spacing-half);
}

.cg3-pad-1_5 {
    padding: var(--cg3-spacing-one-and-half);
}
.cg3-pad-x-1_5 {
    padding-inline: var(--cg3-spacing-one-and-half);
}
.cg3-pad-y-1_5 {
    padding-block: var(--cg3-spacing-one-and-half);
}
.cg3-pad-t-1_5 {
    padding-top: var(--cg3-spacing-one-and-half);
}
.cg3-pad-r-1_5 {
    padding-right: var(--cg3-spacing-one-and-half);
}
.cg3-pad-l-1_5 {
    padding-left: var(--cg3-spacing-one-and-half);
}
.cg3-pad-b-1_5 {
    padding-bottom: var(--cg3-spacing-one-and-half);
}

.cg3-pad-2 {
    padding: var(--cg3-spacing-double);
}
.cg3-pad-x-2 {
    padding-inline: var(--cg3-spacing-double);
}
.cg3-pad-y-2 {
    padding-block: var(--cg3-spacing-double);
}
.cg3-pad-t-2 {
    padding-top: var(--cg3-spacing-double);
}
.cg3-pad-r-2 {
    padding-right: var(--cg3-spacing-double);
}
.cg3-pad-l-2 {
    padding-left: var(--cg3-spacing-double);
}
.cg3-pad-b-2 {
    padding-bottom: var(--cg3-spacing-double);
}

/* margin */

.cg3-mar-0 {
    margin: 0;
}
.cg3-mar-x-auto {
    margin-inline: auto;
}
.cg3-mar-l-auto {
    margin-left: auto;
}
.cg3-mar-r-auto {
    margin-right: auto;
}

.cg3-mar {
    margin: var(--cg3-spacing);
}
.cg3-mar-x {
    margin-inline: var(--cg3-spacing);
}
.cg3-mar-y {
    margin-block: var(--cg3-spacing);
}
.cg3-mar-t {
    margin-top: var(--cg3-spacing);
}
.cg3-mar-r {
    margin-right: var(--cg3-spacing);
}
.cg3-mar-l {
    margin-left: var(--cg3-spacing);
}
.cg3-mar-b {
    margin-bottom: var(--cg3-spacing);
}

/* margin quarter (4px) */
.cg3-mar-0_25 {
    margin: var(--cg3-spacing-quarter);
}
.cg3-mar-x-0_25 {
    margin-inline: var(--cg3-spacing-quarter);
}
.cg3-mar-y-0_25 {
    margin-block: var(--cg3-spacing-quarter);
}
.cg3-mar-t-0_25 {
    margin-top: var(--cg3-spacing-quarter);
}
.cg3-mar-r-0_25 {
    margin-right: var(--cg3-spacing-quarter);
}
.cg3-mar-l-0_25 {
    margin-left: var(--cg3-spacing-quarter);
}
.cg3-mar-b-0_25 {
    margin-bottom: var(--cg3-spacing-quarter);
}

.cg3-mar-0_5 {
    margin: var(--cg3-spacing-half);
}
.cg3-mar-x-0_5 {
    margin-inline: var(--cg3-spacing-half);
}
.cg3-mar-y-0_5 {
    margin-block: var(--cg3-spacing-half);
}
.cg3-mar-t-0_5 {
    margin-top: var(--cg3-spacing-half);
}
.cg3-mar-r-0_5 {
    margin-right: var(--cg3-spacing-half);
}
.cg3-mar-l-0_5 {
    margin-left: var(--cg3-spacing-half);
}
.cg3-mar-b-0_5 {
    margin-bottom: var(--cg3-spacing-half);
}

.cg3-mar-0_625 {
    margin: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-x-0_625 {
    margin-inline: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-y-0_625 {
    margin-block: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-t-0_625 {
    margin-top: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-r-0_625 {
    margin-right: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-l-0_625 {
    margin-left: calc(var(--cg3-spacing) * 0.625);
}
.cg3-mar-b-0_625 {
    margin-bottom: calc(var(--cg3-spacing) * 0.625);
}

/* margin seven-of-eighths (14px) */
.cg3-mar-0_875 {
    margin: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-x-0_875 {
    margin-inline: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-y-0_875 {
    margin-block: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-t-0_875 {
    margin-top: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-r-0_875 {
    margin-right: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-l-0_875 {
    margin-left: var(--cg3-spacing-seven-of-eighths);
}
.cg3-mar-b-0_875 {
    margin-bottom: var(--cg3-spacing-seven-of-eighths);
}

.cg3-mar-1_5 {
    margin: var(--cg3-spacing-one-and-half);
}
.cg3-mar-x-1_5 {
    margin-inline: var(--cg3-spacing-one-and-half);
}
.cg3-mar-y-1_5 {
    margin-block: var(--cg3-spacing-one-and-half);
}
.cg3-mar-t-1_5 {
    margin-top: var(--cg3-spacing-one-and-half);
}
.cg3-mar-r-1_5 {
    margin-right: var(--cg3-spacing-one-and-half);
}
.cg3-mar-l-1_5 {
    margin-left: var(--cg3-spacing-one-and-half);
}
.cg3-mar-b-1_5 {
    margin-bottom: var(--cg3-spacing-one-and-half);
}

.cg3-mar-2 {
    margin: var(--cg3-spacing-double);
}
.cg3-mar-x-2 {
    margin-inline: var(--cg3-spacing-double);
}
.cg3-mar-y-2 {
    margin-block: var(--cg3-spacing-double);
}
.cg3-mar-t-2 {
    margin-top: var(--cg3-spacing-double);
}
.cg3-mar-r-2 {
    margin-right: var(--cg3-spacing-double);
}
.cg3-mar-l-2 {
    margin-left: var(--cg3-spacing-double);
}
.cg3-mar-b-2 {
    margin-bottom: var(--cg3-spacing-double);
}

/* border */

.cg3-border {
    border: var(--cg3-border-width-half) solid var(--cg3-border-color);
}
.cg3-border-t {
    border-width: 0;
    border-top: var(--cg3-border-width-half) solid var(--cg3-border-color);
}
.cg3-border-r {
    border-width: 0;
    border-right: var(--cg3-border-width-half) solid var(--cg3-border-color);
}
.cg3-border-b {
    border-width: 0;
    border-bottom: var(--cg3-border-width-half) solid var(--cg3-border-color);
}
.cg3-border-l {
    border-width: 0;
    border-left: var(--cg3-border-width-half) solid var(--cg3-border-color);
}

/******************** GRID ************************/

/*  BREAKPOINTS */
/* XS  [<= 599] */
/* S   [ 600 - 1023] */
/* M   [ 1024 - 1439] */
/* L   [ 1440 - 1599] */
/* XL  [ 1600 - 1919] */
/* XXL [ >= 1920] */

/* Establish a container context (Makes a component a container) */
/* CSS always finds closest ancestor/parent for container queries */
.cg3-grid-container {
    container-name: cg3-grid-container;
    container-type: inline-size;
}
.cg3-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--cg3-spacing);
}
/* Tablet */
@container cg3-grid-container (min-width: 600px) {
    .cg3-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}
/* Laptop */
@container cg3-grid-container (min-width: 1024px) {
    .cg3-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Named spans: tell me how much width to take up */

/* 50% */
.cg3-gcol-half {
    grid-column: span 2;
}
@container cg3-grid-container (min-width: 600px) {
    .cg3-gcol-half {
        grid-column: span 4;
    }
}
@container cg3-grid-container (min-width: 1024px) {
    .cg3-gcol-half {
        grid-column: span 6;
    }
}

/* 25%*/
.cg3-gcol-1quarter {
    grid-column: span 1;
}
@container cg3-grid-container (min-width: 600px) {
    .cg3-gcol-1quarter {
        grid-column: span 2;
    }
}
@container cg3-grid-container (min-width: 1024px) {
    .cg3-gcol-1quarter {
        grid-column: span 3;
    }
}

/* 75% */
.cg3-gcol-3quarter {
    grid-column: span 3;
}
@container cg3-grid-container (min-width: 600px) {
    .cg3-gcol-3quarter {
        grid-column: span 6;
    }
}
@container cg3-grid-container (min-width: 1024px) {
    .cg3-gcol-3quarter {
        grid-column: span 9;
    }
}

/* 100% */
.cg3-gcol-full {
    grid-column: span 4;
}
@container cg3-grid-container (min-width: 600px) {
    .cg3-gcol-full {
        grid-column: span 8;
    }
}
@container cg3-grid-container (min-width: 1024px) {
    .cg3-gcol-full {
        grid-column: span 12;
    }
}

/* default */
.cg3-gcol-span-1 {
    grid-column: span 1;
}
.cg3-gcol-span-2 {
    grid-column: span 2;
}
.cg3-gcol-span-3 {
    grid-column: span 3;
}
.cg3-gcol-span-4 {
    grid-column: span 4;
}
.cg3-gcol-span-5 {
    grid-column: span 5;
}
.cg3-gcol-span-6 {
    grid-column: span 6;
}
.cg3-gcol-span-7 {
    grid-column: span 7;
}
.cg3-gcol-span-8 {
    grid-column: span 8;
}
.cg3-gcol-span-9 {
    grid-column: span 9;
}
.cg3-gcol-span-10 {
    grid-column: span 5;
}
.cg3-gcol-span-11 {
    grid-column: span 11;
}
.cg3-gcol-span-12 {
    grid-column: span 12;
}

/* S - 8 columns - [600px - 1023px]*/
@container cg3-grid-container (600px <= width < 1024px) {
    .cg3-gcol-span-1-at-s {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-at-s {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-at-s {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-at-s {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-at-s {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-at-s {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-at-s {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-at-s {
        grid-column: span 8;
    }
}

/* S+ - 8 columns - [600px - ...]*/
@container cg3-grid-container (min-width: 600px) {
    .cg3-gcol-span-1-min-s {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-min-s {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-min-s {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-min-s {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-min-s {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-min-s {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-min-s {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-min-s {
        grid-column: span 8;
    }
}

/* M - 12 columns - [1024px - 1439px]*/
@container cg3-grid-container (1024px <= width < 1440px) {
    .cg3-gcol-span-1-at-m {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-at-m {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-at-m {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-at-m {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-at-m {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-at-m {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-at-m {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-at-m {
        grid-column: span 8;
    }

    .cg3-gcol-span-9-at-m {
        grid-column: span 9;
    }

    .cg3-gcol-span-10-at-m {
        grid-column: span 10;
    }

    .cg3-gcol-span-11-at-m {
        grid-column: span 11;
    }

    .cg3-gcol-span-12-at-m {
        grid-column: span 12;
    }
}

/* M+ - 12 columns - [1024px - ...]*/
@container cg3-grid-container (min-width: 1024px) {
    .cg3-gcol-span-1-min-m {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-min-m {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-min-m {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-min-m {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-min-m {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-min-m {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-min-m {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-min-m {
        grid-column: span 8;
    }

    .cg3-gcol-span-9-min-m {
        grid-column: span 9;
    }

    .cg3-gcol-span-10-min-m {
        grid-column: span 10;
    }

    .cg3-gcol-span-11-min-m {
        grid-column: span 11;
    }

    .cg3-gcol-span-12-min-m {
        grid-column: span 12;
    }
}

/* L - 12 columns - [1440px - 1599px]*/
@container cg3-grid-container (1440px <= width < 1600px) {
    .cg3-gcol-span-1-at-l {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-at-l {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-at-l {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-at-l {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-at-l {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-at-l {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-at-l {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-at-l {
        grid-column: span 8;
    }

    .cg3-gcol-span-9-at-l {
        grid-column: span 9;
    }

    .cg3-gcol-span-10-at-l {
        grid-column: span 10;
    }

    .cg3-gcol-span-11-at-l {
        grid-column: span 11;
    }

    .cg3-gcol-span-12-at-l {
        grid-column: span 12;
    }
}

/* L+ - 12 columns - [1440px - ...]*/
@container cg3-grid-container (min-width: 1440px) {
    .cg3-gcol-span-1-min-l {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-min-l {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-min-l {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-min-l {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-min-l {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-min-l {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-min-l {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-min-l {
        grid-column: span 8;
    }

    .cg3-gcol-span-9-min-l {
        grid-column: span 9;
    }

    .cg3-gcol-span-10-min-l {
        grid-column: span 10;
    }

    .cg3-gcol-span-11-min-l {
        grid-column: span 11;
    }

    .cg3-gcol-span-12-min-l {
        grid-column: span 12;
    }
}

/* XL - 12 columns - [1600px - ...]*/
@container cg3-grid-container (min-width: 1600px) {
    .cg3-gcol-span-1-min-xl {
        grid-column: span 1;
    }

    .cg3-gcol-span-2-min-xl {
        grid-column: span 2;
    }

    .cg3-gcol-span-3-min-xl {
        grid-column: span 3;
    }

    .cg3-gcol-span-4-min-xl {
        grid-column: span 4;
    }

    .cg3-gcol-span-5-min-xl {
        grid-column: span 5;
    }

    .cg3-gcol-span-6-min-xl {
        grid-column: span 6;
    }

    .cg3-gcol-span-7-min-xl {
        grid-column: span 7;
    }

    .cg3-gcol-span-8-min-xl {
        grid-column: span 8;
    }

    .cg3-gcol-span-9-min-xl {
        grid-column: span 9;
    }

    .cg3-gcol-span-10-min-xl {
        grid-column: span 10;
    }

    .cg3-gcol-span-11-min-xl {
        grid-column: span 11;
    }

    .cg3-gcol-span-12-min-xl {
        grid-column: span 12;
    }
}