/* ========== DSN GRID SYSTEM ========== */

/* ======= CONTAINERS ======= */
.dsn-container,
.dsn-container-fluid {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.dsn-container {
  max-width: 100%;
}

@media (min-width: 576px)  { .dsn-container { max-width: 540px;  } }
@media (min-width: 768px)  { .dsn-container { max-width: 720px;  } }
@media (min-width: 992px)  { .dsn-container { max-width: 960px;  } }
@media (min-width: 1200px) { .dsn-container { max-width: 1140px; } }
@media (min-width: 1400px) { .dsn-container { max-width: 1320px; } }

/* Container-fluid reste toujours full width */
.dsn-container-fluid {
  max-width: 100%;
}

/* ======= ROWS ======= */
.dsn-row {
  display: flex;
  flex-wrap: wrap;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.dsn-row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* ======= FLEXIBLE COLUMN ======= */
.dsn-col {
  flex: 1 1 0;
  max-width: 100%;
}

/* ======= FIXED WIDTH COLUMNS ======= */
@media (min-width: 0) {
  .dsn-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-12 { flex: 0 0 100%;       max-width: 100%;       }
}

/* ======= RESPONSIVE BREAKPOINTS ======= */
@media (min-width: 576px) {
  .dsn-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-sm-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-sm-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-sm-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-sm-12 { flex: 0 0 100%;       max-width: 100%;       }
}

@media (min-width: 768px) {
  .dsn-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-md-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-md-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-md-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-md-12 { flex: 0 0 100%;       max-width: 100%;       }
}

@media (min-width: 992px) {
  .dsn-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-lg-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-lg-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-lg-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-lg-12 { flex: 0 0 100%;       max-width: 100%;       }
}

@media (min-width: 1200px) {
  .dsn-xl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-xl-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-xl-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-xl-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-xl-12 { flex: 0 0 100%;       max-width: 100%;       }
}

@media (min-width: 1400px) {
  .dsn-xxl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
  .dsn-xxl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dsn-xxl-3  { flex: 0 0 25%;        max-width: 25%;        }
  .dsn-xxl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dsn-xxl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dsn-xxl-6  { flex: 0 0 50%;        max-width: 50%;        }
  .dsn-xxl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dsn-xxl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dsn-xxl-9  { flex: 0 0 75%;        max-width: 75%;        }
  .dsn-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dsn-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dsn-xxl-12 { flex: 0 0 100%;       max-width: 100%;       }
}

/* ======= TOOLS ======= */
.dsn-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}