@import "variables";
@each $per in $percentage {
    @media(min-width: $sm){
        .thmv-column-#{$per} {
            @if $per == 33 {
                $per: 33.33;
            }
            width: #{$per}#{$percentageUnit}!important;
            max-width: #{$per}#{$percentageUnit}!important;
        }

    }
}
@each $per in $percentage {
    @media(max-width: $sm-max){
        .thmv-column-mobile-#{$per} {
            @if $per == 33 {
                $per: 33.33;
            }
            width: #{$per}#{$percentageUnit}!important;
            max-width: #{$per}#{$percentageUnit}!important;
        }
    }
}

@media(min-width: $md) and (max-width: $md-max){
    @each $per in $percentage {
        .thmv-column-tablet-#{$per} {
            @if $per == 33 {
                $per: 33.33;
            }
            width: #{$per}#{$percentageUnit}!important;
            max-width: #{$per}#{$percentageUnit}!important;
        }

    }
}
.th-btn{
    @media(min-width: $lg){
        &.streched-desktop{
            display: block;
            width: 100%;
        }
    }
    @media(min-width: $md) and (max-width: $md-max){
        &.streched-tablet{
            display: block;
            width: 100%;
        }
    }
    @media(max-width: $sm-max){
        &.streched-mobile{
            display: block;
            width: 100%;
        }
    }
}


.d-flex{
    @include d-flex;
}
.align-items-baseline{
    @include align-items-baseline;
}
.align-items-center{
    @include align-items-center;
}
.flex-row-reverse{
    @include flex-row-reverse;
}
.flex-row{
    @include flex-row;
}
.flex-nowrap{
    @include flex-nowrap;
}
.justify-content-end{
    @include justify-content-end;
}
.position-relative{
    position: relative!important;
}
.position-static{
    position: static!important;
}