/* ============================================================
   grid.css — 12-column CSS Grid engine with Bootstrap-style classes
   ------------------------------------------------------------
   Breakpoints (mobile-first):
     (none) base / extra-small
     sm  ≥ 640px
     md  ≥ 768px
     lg  ≥ 1024px
     xl  ≥ 1280px
     2xl ≥ 1536px

   Use:
     <div class="container">
       <div class="row">
         <div class="col col-12 col-md-6 col-lg-4">…</div>
       </div>
     </div>

   Offset:  .col-off-md-3  (starts column at position 4)
   Order:   .col-order-md-1 … .col-order-md-12
   Hide:    .hidden, .hidden-md (hidden at ≥md), .hidden-md-down (hidden below md)
   ============================================================ */

:root {
	--grid-columns: 12;
	--grid-gap: 1rem;

	--container-padding-x: 1rem;
	--container-max-sm:  640px;
	--container-max-md:  768px;
	--container-max-lg:  1024px;
	--container-max-xl:  1280px;
	--container-max-2xl: 1536px;
}

*, *::before, *::after { box-sizing: border-box; }

/* container --------------------------------------------------- */
.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--container-padding-x);
}
.container-fluid { width: 100%; padding-inline: var(--container-padding-x); }

@media (min-width: 640px)  { .container { max-width: var(--container-max-sm);  } }
@media (min-width: 768px)  { .container { max-width: var(--container-max-md);  } }
@media (min-width: 1024px) { .container { max-width: var(--container-max-lg);  } }
@media (min-width: 1280px) { .container { max-width: var(--container-max-xl);  } }
@media (min-width: 1536px) { .container { max-width: var(--container-max-2xl); } }

/* row + col --------------------------------------------------- */
.row {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gap);
	width: 100%;
}
.row-nogap { gap: 0; }

/*
   Each .col uses two CSS custom properties:
     --col-span  : how many columns wide (default = full row)
     --col-start : which column to start at (default = auto-flow)

   Responsive variants overwrite these at each breakpoint.
*/
.col {
	--col-span: var(--grid-columns);
	--col-start: auto;
	grid-column: var(--col-start) / span var(--col-span);
	min-width: 0; /* lets contents shrink instead of forcing row overflow */
}

/* base (xs) spans + offsets ---------------------------------- */
.col-1  { --col-span:  1; }   .col-off-1  { --col-start:  2; }
.col-2  { --col-span:  2; }   .col-off-2  { --col-start:  3; }
.col-3  { --col-span:  3; }   .col-off-3  { --col-start:  4; }
.col-4  { --col-span:  4; }   .col-off-4  { --col-start:  5; }
.col-5  { --col-span:  5; }   .col-off-5  { --col-start:  6; }
.col-6  { --col-span:  6; }   .col-off-6  { --col-start:  7; }
.col-7  { --col-span:  7; }   .col-off-7  { --col-start:  8; }
.col-8  { --col-span:  8; }   .col-off-8  { --col-start:  9; }
.col-9  { --col-span:  9; }   .col-off-9  { --col-start: 10; }
.col-10 { --col-span: 10; }   .col-off-10 { --col-start: 11; }
.col-11 { --col-span: 11; }   .col-off-11 { --col-start: 12; }
.col-12 { --col-span: 12; }   .col-off-0  { --col-start: auto; }

.col-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

/* ordering (base) -------------------------------------------- */
.col-order-first { order: -1; }
.col-order-last  { order: 999; }
.col-order-0  { order: 0; }
.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; }

/* hide / show ------------------------------------------------ */
.hidden { display: none !important; }

/* ─────────────── breakpoint: sm (≥640px) ─────────────── */
@media (min-width: 640px) {
	.col-sm-1  { --col-span:  1; }   .col-off-sm-1  { --col-start:  2; }
	.col-sm-2  { --col-span:  2; }   .col-off-sm-2  { --col-start:  3; }
	.col-sm-3  { --col-span:  3; }   .col-off-sm-3  { --col-start:  4; }
	.col-sm-4  { --col-span:  4; }   .col-off-sm-4  { --col-start:  5; }
	.col-sm-5  { --col-span:  5; }   .col-off-sm-5  { --col-start:  6; }
	.col-sm-6  { --col-span:  6; }   .col-off-sm-6  { --col-start:  7; }
	.col-sm-7  { --col-span:  7; }   .col-off-sm-7  { --col-start:  8; }
	.col-sm-8  { --col-span:  8; }   .col-off-sm-8  { --col-start:  9; }
	.col-sm-9  { --col-span:  9; }   .col-off-sm-9  { --col-start: 10; }
	.col-sm-10 { --col-span: 10; }   .col-off-sm-10 { --col-start: 11; }
	.col-sm-11 { --col-span: 11; }   .col-off-sm-11 { --col-start: 12; }
	.col-sm-12 { --col-span: 12; }   .col-off-sm-0  { --col-start: auto; }
	.col-sm-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

	.col-order-sm-first { order: -1; }
	.col-order-sm-last  { order: 999; }
	.col-order-sm-0  { order: 0; }   .col-order-sm-1  { order: 1; }
	.col-order-sm-2  { order: 2; }   .col-order-sm-3  { order: 3; }
	.col-order-sm-4  { order: 4; }   .col-order-sm-5  { order: 5; }
	.col-order-sm-6  { order: 6; }   .col-order-sm-7  { order: 7; }
	.col-order-sm-8  { order: 8; }   .col-order-sm-9  { order: 9; }
	.col-order-sm-10 { order: 10; }  .col-order-sm-11 { order: 11; }
	.col-order-sm-12 { order: 12; }

	.hidden-sm      { display: none !important; }
	.hidden-sm-down { display: revert !important; }
}
@media (max-width: 639.98px) {
	.hidden-sm-down { display: none !important; }
}

/* ─────────────── breakpoint: md (≥768px) ─────────────── */
@media (min-width: 768px) {
	.col-md-1  { --col-span:  1; }   .col-off-md-1  { --col-start:  2; }
	.col-md-2  { --col-span:  2; }   .col-off-md-2  { --col-start:  3; }
	.col-md-3  { --col-span:  3; }   .col-off-md-3  { --col-start:  4; }
	.col-md-4  { --col-span:  4; }   .col-off-md-4  { --col-start:  5; }
	.col-md-5  { --col-span:  5; }   .col-off-md-5  { --col-start:  6; }
	.col-md-6  { --col-span:  6; }   .col-off-md-6  { --col-start:  7; }
	.col-md-7  { --col-span:  7; }   .col-off-md-7  { --col-start:  8; }
	.col-md-8  { --col-span:  8; }   .col-off-md-8  { --col-start:  9; }
	.col-md-9  { --col-span:  9; }   .col-off-md-9  { --col-start: 10; }
	.col-md-10 { --col-span: 10; }   .col-off-md-10 { --col-start: 11; }
	.col-md-11 { --col-span: 11; }   .col-off-md-11 { --col-start: 12; }
	.col-md-12 { --col-span: 12; }   .col-off-md-0  { --col-start: auto; }
	.col-md-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

	.col-order-md-first { order: -1; }
	.col-order-md-last  { order: 999; }
	.col-order-md-0  { order: 0; }   .col-order-md-1  { order: 1; }
	.col-order-md-2  { order: 2; }   .col-order-md-3  { order: 3; }
	.col-order-md-4  { order: 4; }   .col-order-md-5  { order: 5; }
	.col-order-md-6  { order: 6; }   .col-order-md-7  { order: 7; }
	.col-order-md-8  { order: 8; }   .col-order-md-9  { order: 9; }
	.col-order-md-10 { order: 10; }  .col-order-md-11 { order: 11; }
	.col-order-md-12 { order: 12; }

	.hidden-md      { display: none !important; }
	.hidden-md-down { display: revert !important; }
}
@media (max-width: 767.98px) {
	.hidden-md-down { display: none !important; }
}

/* ─────────────── breakpoint: lg (≥1024px) ─────────────── */
@media (min-width: 1024px) {
	.col-lg-1  { --col-span:  1; }   .col-off-lg-1  { --col-start:  2; }
	.col-lg-2  { --col-span:  2; }   .col-off-lg-2  { --col-start:  3; }
	.col-lg-3  { --col-span:  3; }   .col-off-lg-3  { --col-start:  4; }
	.col-lg-4  { --col-span:  4; }   .col-off-lg-4  { --col-start:  5; }
	.col-lg-5  { --col-span:  5; }   .col-off-lg-5  { --col-start:  6; }
	.col-lg-6  { --col-span:  6; }   .col-off-lg-6  { --col-start:  7; }
	.col-lg-7  { --col-span:  7; }   .col-off-lg-7  { --col-start:  8; }
	.col-lg-8  { --col-span:  8; }   .col-off-lg-8  { --col-start:  9; }
	.col-lg-9  { --col-span:  9; }   .col-off-lg-9  { --col-start: 10; }
	.col-lg-10 { --col-span: 10; }   .col-off-lg-10 { --col-start: 11; }
	.col-lg-11 { --col-span: 11; }   .col-off-lg-11 { --col-start: 12; }
	.col-lg-12 { --col-span: 12; }   .col-off-lg-0  { --col-start: auto; }
	.col-lg-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

	.col-order-lg-first { order: -1; }
	.col-order-lg-last  { order: 999; }
	.col-order-lg-0  { order: 0; }   .col-order-lg-1  { order: 1; }
	.col-order-lg-2  { order: 2; }   .col-order-lg-3  { order: 3; }
	.col-order-lg-4  { order: 4; }   .col-order-lg-5  { order: 5; }
	.col-order-lg-6  { order: 6; }   .col-order-lg-7  { order: 7; }
	.col-order-lg-8  { order: 8; }   .col-order-lg-9  { order: 9; }
	.col-order-lg-10 { order: 10; }  .col-order-lg-11 { order: 11; }
	.col-order-lg-12 { order: 12; }

	.hidden-lg      { display: none !important; }
	.hidden-lg-down { display: revert !important; }
}
@media (max-width: 1023.98px) {
	.hidden-lg-down { display: none !important; }
}

/* ─────────────── breakpoint: xl (≥1280px) ─────────────── */
@media (min-width: 1280px) {
	.col-xl-1  { --col-span:  1; }   .col-off-xl-1  { --col-start:  2; }
	.col-xl-2  { --col-span:  2; }   .col-off-xl-2  { --col-start:  3; }
	.col-xl-3  { --col-span:  3; }   .col-off-xl-3  { --col-start:  4; }
	.col-xl-4  { --col-span:  4; }   .col-off-xl-4  { --col-start:  5; }
	.col-xl-5  { --col-span:  5; }   .col-off-xl-5  { --col-start:  6; }
	.col-xl-6  { --col-span:  6; }   .col-off-xl-6  { --col-start:  7; }
	.col-xl-7  { --col-span:  7; }   .col-off-xl-7  { --col-start:  8; }
	.col-xl-8  { --col-span:  8; }   .col-off-xl-8  { --col-start:  9; }
	.col-xl-9  { --col-span:  9; }   .col-off-xl-9  { --col-start: 10; }
	.col-xl-10 { --col-span: 10; }   .col-off-xl-10 { --col-start: 11; }
	.col-xl-11 { --col-span: 11; }   .col-off-xl-11 { --col-start: 12; }
	.col-xl-12 { --col-span: 12; }   .col-off-xl-0  { --col-start: auto; }
	.col-xl-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

	.col-order-xl-first { order: -1; }
	.col-order-xl-last  { order: 999; }
	.col-order-xl-0  { order: 0; }   .col-order-xl-1  { order: 1; }
	.col-order-xl-2  { order: 2; }   .col-order-xl-3  { order: 3; }
	.col-order-xl-4  { order: 4; }   .col-order-xl-5  { order: 5; }
	.col-order-xl-6  { order: 6; }   .col-order-xl-7  { order: 7; }
	.col-order-xl-8  { order: 8; }   .col-order-xl-9  { order: 9; }
	.col-order-xl-10 { order: 10; }  .col-order-xl-11 { order: 11; }
	.col-order-xl-12 { order: 12; }

	.hidden-xl      { display: none !important; }
	.hidden-xl-down { display: revert !important; }
}
@media (max-width: 1279.98px) {
	.hidden-xl-down { display: none !important; }
}

/* ─────────────── breakpoint: 2xl (≥1536px) ─────────────── */
@media (min-width: 1536px) {
	.col-2xl-1  { --col-span:  1; }   .col-off-2xl-1  { --col-start:  2; }
	.col-2xl-2  { --col-span:  2; }   .col-off-2xl-2  { --col-start:  3; }
	.col-2xl-3  { --col-span:  3; }   .col-off-2xl-3  { --col-start:  4; }
	.col-2xl-4  { --col-span:  4; }   .col-off-2xl-4  { --col-start:  5; }
	.col-2xl-5  { --col-span:  5; }   .col-off-2xl-5  { --col-start:  6; }
	.col-2xl-6  { --col-span:  6; }   .col-off-2xl-6  { --col-start:  7; }
	.col-2xl-7  { --col-span:  7; }   .col-off-2xl-7  { --col-start:  8; }
	.col-2xl-8  { --col-span:  8; }   .col-off-2xl-8  { --col-start:  9; }
	.col-2xl-9  { --col-span:  9; }   .col-off-2xl-9  { --col-start: 10; }
	.col-2xl-10 { --col-span: 10; }   .col-off-2xl-10 { --col-start: 11; }
	.col-2xl-11 { --col-span: 11; }   .col-off-2xl-11 { --col-start: 12; }
	.col-2xl-12 { --col-span: 12; }   .col-off-2xl-0  { --col-start: auto; }
	.col-2xl-auto { --col-span: auto; grid-column: var(--col-start) / auto; }

	.col-order-2xl-first { order: -1; }
	.col-order-2xl-last  { order: 999; }
	.col-order-2xl-0  { order: 0; }   .col-order-2xl-1  { order: 1; }
	.col-order-2xl-2  { order: 2; }   .col-order-2xl-3  { order: 3; }
	.col-order-2xl-4  { order: 4; }   .col-order-2xl-5  { order: 5; }
	.col-order-2xl-6  { order: 6; }   .col-order-2xl-7  { order: 7; }
	.col-order-2xl-8  { order: 8; }   .col-order-2xl-9  { order: 9; }
	.col-order-2xl-10 { order: 10; }  .col-order-2xl-11 { order: 11; }
	.col-order-2xl-12 { order: 12; }

	.hidden-2xl      { display: none !important; }
	.hidden-2xl-down { display: revert !important; }
}
@media (max-width: 1535.98px) {
	.hidden-2xl-down { display: none !important; }
}