/* Base 12-column grid container */
.col-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
    gap: var(--grid-gap, 1rem);
}

@media (max-width: 768px) {
    .col-grid {
        gap: calc(var(--grid-gap) / 2);
    }
}

@media (max-width: 360px) {
    .col-grid {
        gap: 0;
        grid-row-gap: calc(var(--grid-gap) / 2);
    }
}

/* Responsive overrides using breakpoint variables */
/* Note that the breakpoints need to be explicitely defined in the media queries and cannot use the var(--br) variables.
* If you change your breakpoints here, you may want to also change them in styles/theme/variables.css
* Default breakpoint variable values:
* xl : 1200px
* lg : 9600px
* md : 768px
* sm : 480px
* xs : 360px
*/

/* COLUMN SPAN */
.col-span__1  { grid-column: span 1; }
.col-span__2  { grid-column: span 2; }
.col-span__3  { grid-column: span 3; }
.col-span__4  { grid-column: span 4; }
.col-span__5  { grid-column: span 5; }
.col-span__6  { grid-column: span 6; }
.col-span__7  { grid-column: span 7; }
.col-span__8  { grid-column: span 8; }
.col-span__9  { grid-column: span 9; }
.col-span__10  { grid-column: span 10; }
.col-span__11  { grid-column: span 11; }
.col-span__12  { grid-column: span 12; }
@media (max-width: 1200px) {
    .col-span__1--xl  { grid-column: span 1; }
    .col-span__2--xl  { grid-column: span 2; }
    .col-span__3--xl  { grid-column: span 3; }
    .col-span__4--xl  { grid-column: span 4; }
    .col-span__5--xl  { grid-column: span 5; }
    .col-span__6--xl  { grid-column: span 6; }
    .col-span__7--xl  { grid-column: span 7; }
    .col-span__8--xl  { grid-column: span 8; }
    .col-span__9--xl  { grid-column: span 9; }
    .col-span__10--xl  { grid-column: span 10; }
    .col-span__11--xl  { grid-column: span 11; }
    .col-span__12--xl  { grid-column: span 12; }
}
@media (max-width: 960px) {
    .col-span__1--lg  { grid-column: span 1; }
    .col-span__2--lg  { grid-column: span 2; }
    .col-span__3--lg  { grid-column: span 3; }
    .col-span__4--lg  { grid-column: span 4; }
    .col-span__5--lg  { grid-column: span 5; }
    .col-span__6--lg  { grid-column: span 6; }
    .col-span__7--lg  { grid-column: span 7; }
    .col-span__8--lg  { grid-column: span 8; }
    .col-span__9--lg  { grid-column: span 9; }
    .col-span__10--lg  { grid-column: span 10; }
    .col-span__11--lg  { grid-column: span 11; }
    .col-span__12--lg  { grid-column: span 12; }
}
@media (max-width: 768px) {
    .col-span__1--md  { grid-column: span 1; }
    .col-span__2--md  { grid-column: span 2; }
    .col-span__3--md  { grid-column: span 3; }
    .col-span__4--md  { grid-column: span 4; }
    .col-span__5--md  { grid-column: span 5; }
    .col-span__6--md  { grid-column: span 6; }
    .col-span__7--md  { grid-column: span 7; }
    .col-span__8--md  { grid-column: span 8; }
    .col-span__9--md  { grid-column: span 9; }
    .col-span__10--md  { grid-column: span 10; }
    .col-span__11--md  { grid-column: span 11; }
    .col-span__12--md  { grid-column: span 12; }
}
@media (max-width: 480px) {
    .col-span__1--sm  { grid-column: span 1; }
    .col-span__2--sm  { grid-column: span 2; }
    .col-span__3--sm  { grid-column: span 3; }
    .col-span__4--sm  { grid-column: span 4; }
    .col-span__5--sm  { grid-column: span 5; }
    .col-span__6--sm  { grid-column: span 6; }
    .col-span__7--sm  { grid-column: span 7; }
    .col-span__8--sm  { grid-column: span 8; }
    .col-span__9--sm  { grid-column: span 9; }
    .col-span__10--sm  { grid-column: span 10; }
    .col-span__11--sm  { grid-column: span 11; }
    .col-span__12--sm  { grid-column: span 12; }
}
@media (max-width: 360px) {
    .col-span__1--xs  { grid-column: span 1; }
    .col-span__2--xs  { grid-column: span 2; }
    .col-span__3--xs  { grid-column: span 3; }
    .col-span__4--xs  { grid-column: span 4; }
    .col-span__5--xs  { grid-column: span 5; }
    .col-span__6--xs  { grid-column: span 6; }
    .col-span__7--xs  { grid-column: span 7; }
    .col-span__8--xs  { grid-column: span 8; }
    .col-span__9--xs  { grid-column: span 9; }
    .col-span__10--xs  { grid-column: span 10; }
    .col-span__11--xs  { grid-column: span 11; }
    .col-span__12--xs  { grid-column: span 12; }
}

/* COLUMN ORDER */
.col-order__1  { order: 1; }
.col-order__2  { order: 2; }
.col-order__3  { order: 3; }
.col-order__4  { order: 4; }
.col-order__5  { order: 5; }
.col-order__6  { order: 6; }
.col-order__7  { order: 7; }
.col-order__8  { order: 8; }
.col-order__9  { order: 9; }
.col-order__10  { order: 10; }
.col-order__11  { order: 11; }
.col-order__12  { order: 12; }
@media (max-width: 1200px) {
    .col-order__1--xl  { order: 1; }
    .col-order__2--xl  { order: 2; }
    .col-order__3--xl  { order: 3; }
    .col-order__4--xl  { order: 4; }
    .col-order__5--xl  { order: 5; }
    .col-order__6--xl  { order: 6; }
    .col-order__7--xl  { order: 7; }
    .col-order__8--xl  { order: 8; }
    .col-order__9--xl  { order: 9; }
    .col-order__10--xl  { order: 10; }
    .col-order__11--xl  { order: 11; }
    .col-order__12--xl  { order: 12; }
}
@media (max-width: 960px) {
    .col-order__1--lg  { order: 1; }
    .col-order__2--lg  { order: 2; }
    .col-order__3--lg  { order: 3; }
    .col-order__4--lg  { order: 4; }
    .col-order__5--lg  { order: 5; }
    .col-order__6--lg  { order: 6; }
    .col-order__7--lg  { order: 7; }
    .col-order__8--lg  { order: 8; }
    .col-order__9--lg  { order: 9; }
    .col-order__10--lg  { order: 10; }
    .col-order__11--lg  { order: 11; }
    .col-order__12--lg  { order: 12; }
}
@media (max-width: 768px) {
    .col-order__1--md  { order: 1; }
    .col-order__2--md  { order: 2; }
    .col-order__3--md  { order: 3; }
    .col-order__4--md  { order: 4; }
    .col-order__5--md  { order: 5; }
    .col-order__6--md  { order: 6; }
    .col-order__7--md  { order: 7; }
    .col-order__8--md  { order: 8; }
    .col-order__9--md  { order: 9; }
    .col-order__10--md  { order: 10; }
    .col-order__11--md  { order: 11; }
    .col-order__12--md  { order: 12; }
}
@media (max-width: 480px) {
    .col-order__1--sm  { order: 1; }
    .col-order__2--sm  { order: 2; }
    .col-order__3--sm  { order: 3; }
    .col-order__4--sm  { order: 4; }
    .col-order__5--sm  { order: 5; }
    .col-order__6--sm  { order: 6; }
    .col-order__7--sm  { order: 7; }
    .col-order__8--sm  { order: 8; }
    .col-order__9--sm  { order: 9; }
    .col-order__10--sm  { order: 10; }
    .col-order__11--sm  { order: 11; }
    .col-order__12--sm  { order: 12; }
}
@media (max-width: 360px) {
    .col-order__1--xs  { order: 1; }
    .col-order__2--xs  { order: 2; }
    .col-order__3--xs  { order: 3; }
    .col-order__4--xs  { order: 4; }
    .col-order__5--xs  { order: 5; }
    .col-order__6--xs  { order: 6; }
    .col-order__7--xs  { order: 7; }
    .col-order__8--xs  { order: 8; }
    .col-order__9--xs  { order: 9; }
    .col-order__10--xs  { order: 10; }
    .col-order__11--xs  { order: 11; }
    .col-order__12--xs  { order: 12; }
}

/* ALIGNMENTS (VERTICAL) */
.align__start { align-items: start; }
.align__center { align-items: center; }
.align__end { align-items: end; }
.align__stretch { align-items: stretch; }
.align__baseline { align-items: baseline; }
@media (max-width: 1200px) {
    .align__start--xl { align-items: start; }
    .align__center--xl { align-items: center; }
    .align__end--xl { align-items: end; }
    .align__stretch--xl { align-items: stretch; }
    .align__baseline--xl { align-items: baseline; }
}
@media (max-width: 960px) {
    .align__start--lg { align-items: start; }
    .align__center--lg { align-items: center; }
    .align__end--lg { align-items: end; }
    .align__stretch--lg { align-items: stretch; }
    .align__baseline--lg { align-items: baseline; }
}
@media (max-width: 768px) {
    .align__start--md { align-items: start; }
    .align__center--md { align-items: center; }
    .align__end--md { align-items: end; }
    .align__stretch--md { align-items: stretch; }
    .align__baseline--md { align-items: baseline; }
}
@media (max-width: 480px) {
    .align__start--sm { align-items: start; }
    .align__center--sm { align-items: center; }
    .align__end--sm { align-items: end; }
    .align__stretch--sm { align-items: stretch; }
    .align__baseline--sm { align-items: baseline; }
}
@media (max-width: 360px) {
    .align__start--xs { align-items: start; }
    .align__center--xs { align-items: center; }
    .align__end--xs { align-items: end; }
    .align__stretch--xs { align-items: stretch; }
    .align__baseline--xs { align-items: baseline; }
}

/* JUSTIFY (HORIZONTAL) */
.justify__start { justify-content: start; }
.justify__center { justify-content: center; }
.justify__end { justify-content: end; }
.justify__between { justify-content: between; }
.justify__around { justify-content: around; }
.justify__evenly { justify-content: evenly; }
@media (max-width: 1200px) {
    .justify__start--xl { justify-content: start; }
    .justify__center--xl { justify-content: center; }
    .justify__end--xl { justify-content: end; }
    .justify__between--xl { justify-content: between; }
    .justify__around--xl { justify-content: around; }
    .justify__evenly--xl { justify-content: evenly; }
}
@media (max-width: 960px) {
    .justify__start--lg { justify-content: start; }
    .justify__center--lg { justify-content: center; }
    .justify__end--lg { justify-content: end; }
    .justify__between--lg { justify-content: between; }
    .justify__around--lg { justify-content: around; }
    .justify__evenly--lg { justify-content: evenly; }
}
@media (max-width: 768px) {
    .justify__start--md { justify-content: start; }
    .justify__center--md { justify-content: center; }
    .justify__end--md { justify-content: end; }
    .justify__between--md { justify-content: between; }
    .justify__around--md { justify-content: around; }
    .justify__evenly--md { justify-content: evenly; }
}
@media (max-width: 480px) {
    .justify__start--sm { justify-content: start; }
    .justify__center--sm { justify-content: center; }
    .justify__end--sm { justify-content: end; }
    .justify__between--sm { justify-content: between; }
    .justify__around--sm { justify-content: around; }
    .justify__evenly--sm { justify-content: evenly; }
}
@media (max-width: 360px) {
    .justify__start--xs { justify-content: start; }
    .justify__center--xs { justify-content: center; }
    .justify__end--xs { justify-content: end; }
    .justify__between--xs { justify-content: between; }
    .justify__around--xs { justify-content: around; }
    .justify__evenly--xs { justify-content: evenly; }
}

/* TEXT ALIGNMENTS */
.text-align__left { text-align: left; }
.text-align__center { text-align: center; }
.text-align__right { text-align: right; }
.text-align__justify { text-align: justify; }
@media (max-width: 1200px) {
    .text-align__left--xl { text-align: left; }
    .text-align__center--xl { text-align: center; }
    .text-align__right--xl { text-align: right; }
    .text-align__justify--xl { text-align: justify; }
}
@media (max-width: 960px) {
    .text-align__left--lg { text-align: left; }
    .text-align__center--lg { text-align: center; }
    .text-align__right--lg { text-align: right; }
    .text-align__justify--lg { text-align: justify; }
}
@media (max-width: 768px) {
    .text-align__left--md { text-align: left; }
    .text-align__center--md { text-align: center; }
    .text-align__right--md { text-align: right; }
    .text-align__justify--md { text-align: justify; }
}
@media (max-width: 480px) {
    .text-align__left--sm { text-align: left; }
    .text-align__center--sm { text-align: center; }
    .text-align__right--sm { text-align: right; }
    .text-align__justify--sm { text-align: justify; }
}
@media (max-width: 360px) {
    .text-align__left--xs { text-align: left; }
    .text-align__center--xs { text-align: center; }
    .text-align__right--xs { text-align: right; }
    .text-align__justify--xs { text-align: justify; }
}