.wrapper {
	width: calc(100% - 60px);
	max-width: 1200px;
	margin: auto;
}

@media (max-width: 480px) {
    .wrapper {
        width: calc(100% - 30px);
    }
}

.wrapper--wide {
	max-width: initial;
}

/* ==========================================================================
   Breakpoints + Grid defaults (compiled from your SASS)
   - Breakpoints:
     xxl 1440px | xl 1200px | lg 960px | md 768px | sm 640px | xs 480px | xxs 360px
   - Defaults:
     grid-cols: 12
     grid-gap: 30px
========================================================================== */

/* BASE GRID */
.col-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
    gap: var(--grid-gap, 30px);
}

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

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

/* GRID VARIANTS */
.col-grid__12 {
    --grid-cols: 12;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.col-grid__15 {
    --grid-cols: 15;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
}

/* Responsive variants for 12 and 15 cols */
@media (max-width: 1440px) {
    .col-grid__12--xxl {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--xxl {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 1200px) {
    .col-grid__12--xl {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--xl {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 960px) {
    .col-grid__12--lg {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--lg {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 768px) {
    .col-grid__12--md {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--md {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 640px) {
    .col-grid__12--sm {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--sm {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 480px) {
    .col-grid__12--xs {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--xs {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

@media (max-width: 360px) {
    .col-grid__12--xxs {
        --grid-cols: 12;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
    .col-grid__15--xxs {
        --grid-cols: 15;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
    }
}

/* COLUMN SPANS (1..15) */
.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; }
.col-span__13 { grid-column: span 13; }
.col-span__14 { grid-column: span 14; }
.col-span__15 { grid-column: span 15; }

/* Responsive column spans */
@media (max-width: 1440px) {
    .col-span__1--xxl { grid-column: span 1; }
    .col-span__2--xxl { grid-column: span 2; }
    .col-span__3--xxl { grid-column: span 3; }
    .col-span__4--xxl { grid-column: span 4; }
    .col-span__5--xxl { grid-column: span 5; }
    .col-span__6--xxl { grid-column: span 6; }
    .col-span__7--xxl { grid-column: span 7; }
    .col-span__8--xxl { grid-column: span 8; }
    .col-span__9--xxl { grid-column: span 9; }
    .col-span__10--xxl { grid-column: span 10; }
    .col-span__11--xxl { grid-column: span 11; }
    .col-span__12--xxl { grid-column: span 12; }
    .col-span__13--xxl { grid-column: span 13; }
    .col-span__14--xxl { grid-column: span 14; }
    .col-span__15--xxl { grid-column: span 15; }
}

@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; }
    .col-span__13--xl { grid-column: span 13; }
    .col-span__14--xl { grid-column: span 14; }
    .col-span__15--xl { grid-column: span 15; }
}

@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; }
    .col-span__13--lg { grid-column: span 13; }
    .col-span__14--lg { grid-column: span 14; }
    .col-span__15--lg { grid-column: span 15; }
}

@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; }
    .col-span__13--md { grid-column: span 13; }
    .col-span__14--md { grid-column: span 14; }
    .col-span__15--md { grid-column: span 15; }
}

@media (max-width: 640px) {
    .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; }
    .col-span__13--sm { grid-column: span 13; }
    .col-span__14--sm { grid-column: span 14; }
    .col-span__15--sm { grid-column: span 15; }
}

@media (max-width: 480px) {
    .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; }
    .col-span__13--xs { grid-column: span 13; }
    .col-span__14--xs { grid-column: span 14; }
    .col-span__15--xs { grid-column: span 15; }
}

@media (max-width: 360px) {
    .col-span__1--xxs { grid-column: span 1; }
    .col-span__2--xxs { grid-column: span 2; }
    .col-span__3--xxs { grid-column: span 3; }
    .col-span__4--xxs { grid-column: span 4; }
    .col-span__5--xxs { grid-column: span 5; }
    .col-span__6--xxs { grid-column: span 6; }
    .col-span__7--xxs { grid-column: span 7; }
    .col-span__8--xxs { grid-column: span 8; }
    .col-span__9--xxs { grid-column: span 9; }
    .col-span__10--xxs { grid-column: span 10; }
    .col-span__11--xxs { grid-column: span 11; }
    .col-span__12--xxs { grid-column: span 12; }
    .col-span__13--xxs { grid-column: span 13; }
    .col-span__14--xxs { grid-column: span 14; }
    .col-span__15--xxs { grid-column: span 15; }
}

/* COLUMN ORDER (1..15) */
.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; }
.col-order__13 { order: 13; }
.col-order__14 { order: 14; }
.col-order__15 { order: 15; }

/* Responsive column order */
@media (max-width: 1440px) {
    .col-order__1--xxl { order: 1; }
    .col-order__2--xxl { order: 2; }
    .col-order__3--xxl { order: 3; }
    .col-order__4--xxl { order: 4; }
    .col-order__5--xxl { order: 5; }
    .col-order__6--xxl { order: 6; }
    .col-order__7--xxl { order: 7; }
    .col-order__8--xxl { order: 8; }
    .col-order__9--xxl { order: 9; }
    .col-order__10--xxl { order: 10; }
    .col-order__11--xxl { order: 11; }
    .col-order__12--xxl { order: 12; }
    .col-order__13--xxl { order: 13; }
    .col-order__14--xxl { order: 14; }
    .col-order__15--xxl { order: 15; }
}

@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; }
    .col-order__13--xl { order: 13; }
    .col-order__14--xl { order: 14; }
    .col-order__15--xl { order: 15; }
}

@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; }
    .col-order__13--lg { order: 13; }
    .col-order__14--lg { order: 14; }
    .col-order__15--lg { order: 15; }
}

@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; }
    .col-order__13--md { order: 13; }
    .col-order__14--md { order: 14; }
    .col-order__15--md { order: 15; }
}

@media (max-width: 640px) {
    .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; }
    .col-order__13--sm { order: 13; }
    .col-order__14--sm { order: 14; }
    .col-order__15--sm { order: 15; }
}

@media (max-width: 480px) {
    .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; }
    .col-order__13--xs { order: 13; }
    .col-order__14--xs { order: 14; }
    .col-order__15--xs { order: 15; }
}

@media (max-width: 360px) {
    .col-order__1--xxs { order: 1; }
    .col-order__2--xxs { order: 2; }
    .col-order__3--xxs { order: 3; }
    .col-order__4--xxs { order: 4; }
    .col-order__5--xxs { order: 5; }
    .col-order__6--xxs { order: 6; }
    .col-order__7--xxs { order: 7; }
    .col-order__8--xxs { order: 8; }
    .col-order__9--xxs { order: 9; }
    .col-order__10--xxs { order: 10; }
    .col-order__11--xxs { order: 11; }
    .col-order__12--xxs { order: 12; }
    .col-order__13--xxs { order: 13; }
    .col-order__14--xxs { order: 14; }
    .col-order__15--xxs { order: 15; }
}

/* ALIGN ITEMS */
.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: 1440px) {
    .align__start--xxl { align-items: start; }
    .align__center--xxl { align-items: center; }
    .align__end--xxl { align-items: end; }
    .align__stretch--xxl { align-items: stretch; }
    .align__baseline--xxl { 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: 640px) {
    .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: 480px) {
    .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; }
}

@media (max-width: 360px) {
    .align__start--xxs { align-items: start; }
    .align__center--xxs { align-items: center; }
    .align__end--xxs { align-items: end; }
    .align__stretch--xxs { align-items: stretch; }
    .align__baseline--xxs { align-items: baseline; }
}

/* JUSTIFY CONTENT */
.justify__start { justify-content: start; }
.justify__center { justify-content: center; }
.justify__end { justify-content: end; }
.justify__between { justify-content: space-between; }
.justify__around { justify-content: space-around; }
.justify__evenly { justify-content: space-evenly; }

@media (max-width: 1440px) {
    .justify__start--xxl { justify-content: start; }
    .justify__center--xxl { justify-content: center; }
    .justify__end--xxl { justify-content: end; }
    .justify__between--xxl { justify-content: space-between; }
    .justify__around--xxl { justify-content: space-around; }
    .justify__evenly--xxl { justify-content: space-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: space-between; }
    .justify__around--xl { justify-content: space-around; }
    .justify__evenly--xl { justify-content: space-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: space-between; }
    .justify__around--lg { justify-content: space-around; }
    .justify__evenly--lg { justify-content: space-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: space-between; }
    .justify__around--md { justify-content: space-around; }
    .justify__evenly--md { justify-content: space-evenly; }
}

@media (max-width: 640px) {
    .justify__start--sm { justify-content: start; }
    .justify__center--sm { justify-content: center; }
    .justify__end--sm { justify-content: end; }
    .justify__between--sm { justify-content: space-between; }
    .justify__around--sm { justify-content: space-around; }
    .justify__evenly--sm { justify-content: space-evenly; }
}

@media (max-width: 480px) {
    .justify__start--xs { justify-content: start; }
    .justify__center--xs { justify-content: center; }
    .justify__end--xs { justify-content: end; }
    .justify__between--xs { justify-content: space-between; }
    .justify__around--xs { justify-content: space-around; }
    .justify__evenly--xs { justify-content: space-evenly; }
}

@media (max-width: 360px) {
    .justify__start--xxs { justify-content: start; }
    .justify__center--xxs { justify-content: center; }
    .justify__end--xxs { justify-content: end; }
    .justify__between--xxs { justify-content: space-between; }
    .justify__around--xxs { justify-content: space-around; }
    .justify__evenly--xxs { justify-content: space-evenly; }
}

/* TEXT ALIGN */
.text-align__left { text-align: left; }
.text-align__left p { text-align: left; }

.text-align__center { text-align: center; }
.text-align__center p { text-align: center; }

.text-align__right { text-align: right; }
.text-align__right p { text-align: right; }

.text-align__justify { text-align: justify; }
.text-align__justify p { text-align: justify; }

/* Responsive text-align */
@media (max-width: 1440px) {
    .text-align__left--xxl { text-align: left; }
    .text-align__left--xxl p { text-align: left; }

    .text-align__center--xxl { text-align: center; }
    .text-align__center--xxl p { text-align: center; }

    .text-align__right--xxl { text-align: right; }
    .text-align__right--xxl p { text-align: right; }

    .text-align__justify--xxl { text-align: justify; }
    .text-align__justify--xxl p { text-align: justify; }
}

@media (max-width: 1200px) {
    .text-align__left--xl { text-align: left; }
    .text-align__left--xl p { text-align: left; }

    .text-align__center--xl { text-align: center; }
    .text-align__center--xl p { text-align: center; }

    .text-align__right--xl { text-align: right; }
    .text-align__right--xl p { text-align: right; }

    .text-align__justify--xl { text-align: justify; }
    .text-align__justify--xl p { text-align: justify; }
}

@media (max-width: 960px) {
    .text-align__left--lg { text-align: left; }
    .text-align__left--lg p { text-align: left; }

    .text-align__center--lg { text-align: center; }
    .text-align__center--lg p { text-align: center; }

    .text-align__right--lg { text-align: right; }
    .text-align__right--lg p { text-align: right; }

    .text-align__justify--lg { text-align: justify; }
    .text-align__justify--lg p { text-align: justify; }
}

@media (max-width: 768px) {
    .text-align__left--md { text-align: left; }
    .text-align__left--md p { text-align: left; }

    .text-align__center--md { text-align: center; }
    .text-align__center--md p { text-align: center; }

    .text-align__right--md { text-align: right; }
    .text-align__right--md p { text-align: right; }

    .text-align__justify--md { text-align: justify; }
    .text-align__justify--md p { text-align: justify; }
}

@media (max-width: 640px) {
    .text-align__left--sm { text-align: left; }
    .text-align__left--sm p { text-align: left; }

    .text-align__center--sm { text-align: center; }
    .text-align__center--sm p { text-align: center; }

    .text-align__right--sm { text-align: right; }
    .text-align__right--sm p { text-align: right; }

    .text-align__justify--sm { text-align: justify; }
    .text-align__justify--sm p { text-align: justify; }
}

@media (max-width: 480px) {
    .text-align__left--xs { text-align: left; }
    .text-align__left--xs p { text-align: left; }

    .text-align__center--xs { text-align: center; }
    .text-align__center--xs p { text-align: center; }

    .text-align__right--xs { text-align: right; }
    .text-align__right--xs p { text-align: right; }

    .text-align__justify--xs { text-align: justify; }
    .text-align__justify--xs p { text-align: justify; }
}

@media (max-width: 360px) {
    .text-align__left--xxs { text-align: left; }
    .text-align__left--xxs p { text-align: left; }

    .text-align__center--xxs { text-align: center; }
    .text-align__center--xxs p { text-align: center; }

    .text-align__right--xxs { text-align: right; }
    .text-align__right--xxs p { text-align: right; }

    .text-align__justify--xxs { text-align: justify; }
    .text-align__justify--xxs p { text-align: justify; }
}