/*like a bootstrap*/
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}
.g-0, .gy-0 {--bs-gutter-y: 0;}
.g-0, .gx-0 {--bs-gutter-x: 0;}
.g-1, .gy-1 {--bs-gutter-y: 0.25rem;}
.g-1, .gx-1 {--bs-gutter-x: 0.25rem;}
.g-2, .gy-2 {--bs-gutter-y: 0.5rem;}
.g-2, .gx-2 {--bs-gutter-x: 0.5rem;}
.g-3, .gx-3 {--bs-gutter-x: 1rem;}
.g-3, .gy-3 {--bs-gutter-y: 1rem;}
.g-4, .gy-4 {--bs-gutter-y: 1.5rem;}
.g-4, .gx-4 {--bs-gutter-x: 1.5rem;}
.g-5, .gy-5 {--bs-gutter-y: 3rem;}
.g-5, .gx-5 {--bs-gutter-x: 3rem;}

.d-flex {display: flex;}
.flex-column {flex-direction: column;}
.flex-wrap { flex-wrap: wrap !important; }
.mt-2 {margin-top: .5rem !important;}
.mt-auto {margin-top: auto !important;}
.m-auto {margin: auto !important;}
.h-100 { height: 100% !important; }

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

.align-items-center {align-items: center !important;}
.justify-content-center {justify-content: center !important;}

.col-12 { flex: 0 0 auto; width: 100%; }


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

@media screen and (min-width: 768px) {
    .d-md-flex {display: flex;}
    .col-md-6 {flex: 0 0 auto; width: 50%;}
    .col-md-4 {flex: 0 0 auto; width: 33.33333333%;}
}
@media screen and (min-width: 992px) {
    .col-lg-4 {flex: 0 0 auto; width: 33.33333333%;}
    .col-lg-3 {flex: 0 0 auto; width: 25%;}
}