/* Minimal Bootstrap Alternative - Grid System Only */

/* Variables */
:root {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

/* Container */
.container,
.container-lg {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

.container-lg {
  max-width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}
.flex-column{
  flex-direction: column;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }

  .container-lg {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  .container-lg {
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  .container-lg {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .container-lg {
    max-width: 900px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .container-lg {
    max-width: 900px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .container-lg {
    max-width: 900px;
  }
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-top: calc(var(--bs-gutter-y) * -1);
}

.row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.row.align-items-center {
  align-items: center;
}

.row.justify-content-center {
  justify-content: center;
}

/* Grid Columns */
.col {
  flex: 1 0 0%;
}

/* SM Grid (576px) */
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* MD Grid (768px) */
@media (min-width: 768px) {
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
}

/* LG Grid (992px) */
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* XL Grid (1200px) */
@media (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
}

/* Utilities */
.img-fluid {
  max-width: 100%;
  height: auto;
}

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

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}