.row {
    @include styleclass('grid');
}

.d-none {
    @include styleclass('hidden');
}

.d-sm-none {
    @include styleclass('sm:hidden');
}

.d-md-none {
    @include styleclass('md:hidden');
}

.d-lg-none {
    @include styleclass('lg:hidden');
}

.d-xl-none {
    @include styleclass('xl:hidden');
}

.d-sm-table-row {
    @media (min-width: $sm) {
        display: table-row !important;
    }
}

.d-md-table-row {
    @media (min-width: $md) {
        display: table-row !important;
    }
}

.d-lg-table-row {
    @media (min-width: $lg) {
        display: table-row !important;
    }
}

.d-xl-table-row {
    @media (min-width: $xl) {
        display: table-row !important;
    }
}

.d-sm-table-cell {
    @media (min-width: $sm) {
        display: table-cell !important;
    }
}

.d-md-table-cell {
    @media (min-width: $md) {
        display: table-cell !important;
    }
}

.d-lg-table-cell {
    @media (min-width: $lg) {
        display: table-cell !important;
    }
}

.d-xl-table-cell {
    @media (min-width: $xl) {
        display: table-cell !important;
    }
}

.col-sm-1 {
    @include styleclass('col-1 sm:col-1');
}
.col-sm-2 {
    @include styleclass('col-2 sm:col-2');
}
.col-sm-3 {
    @include styleclass('col-3 sm:col-3');
}
.col-sm-4 {
    @include styleclass('col-4 sm:col-4');
}
.col-sm-5 {
    @include styleclass('col-5 sm:col-5');
}
.col-sm-6 {
    @include styleclass('col-6 sm:col-6');
}
.col-sm-7 {
    @include styleclass('col-7 sm:col-7');
}
.col-sm-8 {
    @include styleclass('col-8 sm:col-8');
}
.col-sm-9 {
    @include styleclass('col-9 sm:col-9');
}
.col-sm-10 {
    @include styleclass('col-10 sm:col-10');
}
.col-sm-11 {
    @include styleclass('col-11 sm:col-11');
}
.col-sm-12 {
    @include styleclass('col-12 sm:col-12');
}

.col-md-1 {
    @include styleclass('md:col-1');
}
.col-md-2 {
    @include styleclass('md:col-2');
}
.col-md-3 {
    @include styleclass('md:col-3');
}
.col-md-4 {
    @include styleclass('md:col-4');
}
.col-md-5 {
    @include styleclass('md:col-5');
}
.col-md-6 {
    @include styleclass('md:col-6');
}
.col-md-7 {
    @include styleclass('md:col-7');
}
.col-md-8 {
    @include styleclass('md:col-8');
}
.col-md-9 {
    @include styleclass('md:col-9');
}
.col-md-10 {
    @include styleclass('md:col-10');
}
.col-md-11 {
    @include styleclass('md:col-11');
}
.col-md-12 {
    @include styleclass('md:col-12');
}

.col-lg-1 {
    @include styleclass('lg:col-1');
}
.col-lg-2 {
    @include styleclass('lg:col-2');
}
.col-lg-3 {
    @include styleclass('lg:col-3');
}
.col-lg-4 {
    @include styleclass('lg:col-4');
}
.col-lg-5 {
    @include styleclass('lg:col-5');
}
.col-lg-6 {
    @include styleclass('lg:col-6');
}
.col-lg-7 {
    @include styleclass('lg:col-7');
}
.col-lg-8 {
    @include styleclass('lg:col-8');
}
.col-lg-9 {
    @include styleclass('lg:col-9');
}
.col-lg-10 {
    @include styleclass('lg:col-10');
}
.col-lg-11 {
    @include styleclass('lg:col-11');
}
.col-lg-12 {
    @include styleclass('lg:col-12');
}

.col-xl-1 {
    @include styleclass('xl:col-1');
}
.col-xl-2 {
    @include styleclass('xl:col-2');
}
.col-xl-3 {
    @include styleclass('xl:col-3');
}
.col-xl-4 {
    @include styleclass('xl:col-4');
}
.col-xl-5 {
    @include styleclass('xl:col-5');
}
.col-xl-6 {
    @include styleclass('xl:col-6');
}
.col-xl-7 {
    @include styleclass('xl:col-7');
}
.col-xl-8 {
    @include styleclass('xl:col-8');
}
.col-xl-9 {
    @include styleclass('xl:col-9');
}
.col-xl-10 {
    @include styleclass('xl:col-10');
}
.col-xl-11 {
    @include styleclass('xl:col-11');
}
.col-xl-12 {
    @include styleclass('xl:col-12');
}

.d-sm-block {
    @include styleclass('sm:block');
}
.d-md-block {
    @include styleclass('md:block');
}
.d-lg-block {
    @include styleclass('lg:block');
}
.d-xl-block {
    @include styleclass('xl:block');
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.d-block {
    @include styleclass('block');
}

.d-inline-block {
    @include styleclass('inline-block');
}

.form-control {
    font-size: 1rem;
    background: #ffffff;
    padding: 0.5rem 0.5rem;
    border: 1px solid #ced4da;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 3px;
    margin: 0;
    &:focus-visible {
        outline: none;
    }
}

.d-sm-flex {
    @include styleclass('sm:flex');
}
.d-md-flex {
    @include styleclass('md:flex');
}
.d-lg-flex {
    @include styleclass('lg:flex');
}
.d-xl-flex {
    @include styleclass('xl:flex');
}

@media (min-width: $sm) {
    .col-sm {
        flex: 1 0 0%;
    }
}
@media (min-width: $md) {
    .col-md {
        flex: 1 0 0%;
    }
}
@media (min-width: $lg) {
    .col-lg {
        flex: 1 0 0%;
    }
}
@media (min-width: $xl) {
    .col-xl {
        flex: 1 0 0%;
    }
}