/* --- Container --- */
.container,
.container-sm,
.container-md,
.container-lg {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left:20px;
    padding-right:20px;
}
.container{
    max-width: var(--container);
}
.container-sm{
    max-width: var(--container-sm);
}
.container-md{
    max-width: var(--container-md);
}
.container-lg{
    max-width: var(--container-lg);
}

/* --- Grid --- */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap:var(--grid-gutter);
}
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:var(--grid-gutter);
}
.grid-content {
    display: grid;
    grid-auto-columns: max-content; 
    grid-auto-flow: column;
    gap: var(--grid-gutter);
}

/* Mobile First Base */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
}

@media (max-width: 768px) {
    .col-1  { grid-column: span 1; }
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

@media (min-width: 769px) {
    .col-md-1  { grid-column: span 1; }
    .col-md-2  { grid-column: span 2; }
    .col-md-3  { grid-column: span 3; }
    .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }
    .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }
    .col-md-8  { grid-column: span 8; }
    .col-md-9  { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
    .col-lg-1  { grid-column: span 1; }
    .col-lg-2  { grid-column: span 2; }
    .col-lg-3  { grid-column: span 3; }
    .col-lg-4  { grid-column: span 4; }
    .col-lg-5  { grid-column: span 5; }
    .col-lg-6  { grid-column: span 6; }
    .col-lg-7  { grid-column: span 7; }
    .col-lg-8  { grid-column: span 8; }
    .col-lg-9  { grid-column: span 9; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-12 { grid-column: span 12; }
}

/* --- Gutter ---*/
.no-gutter{
    gap:0 !important;
}
.gutter-1{
    gap:1rem;
}
.gutter-2{
    gap:2rem;
}
.gutter-3{
    gap:3rem;
}

/* --- Display --- */
.d-none{display: none !important;}
@media (max-width: 767px) {
    .hide-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-md { display: none !important; }
}
@media (min-width: 1024px) {
    .hide-lg { display: none !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
}
.hidden-sm-down { display: none; }
@media (min-width: 1024px) {
    .hidden-sm-down { display: block; }
}
@media (min-width: 1024px) {
    .hidden-lg-up { display: none !important; }
}

/* --- Adjustment Helper Classes --- */
/* Mobile First: Default order is 0 */
.order-first { order: -1; }
.order-last  { order: 13; }

/* Tablet/Medium Screens */
@media (min-width: 768px) {
    .order-md-1 { order: 1; }
    .order-md-2 { order: 2; }
    .order-md-first { order: -1; }
    .order-md-last  { order: 13; }
}

/* Desktop/Large Screens */
@media (min-width: 1024px) {
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
}

/* --- Content Gaps --- */
@media (min-width: 768px) {
    .offset-md-1 { grid-column-start: 2; }
    .offset-md-2 { grid-column-start: 3; }
    .offset-md-3 { grid-column-start: 4; }
}