$baseFontSize: 0.25rem;
/*font size*/

@mixin font-x-list-normal {
  $count: 0rem;

  @for $i from 0 through 20 {
    .font-size-#{$i + 1}-x {
      font-size: ($baseFontSize + $count) !important;
    }

    $count: $count + 0.25;
  }
}

@include font-x-list-normal;

@media (min-width: 576px) {
  @mixin font-x-list-sm {
    $count: 0rem;

    @for $i from 0 through 20 {
      .font-size-sm-#{$i + 1}-x {
        font-size: ($baseFontSize + $count) !important;
      }

      $count: $count + 0.25;
    }
  }

  @include font-x-list-sm;
}

@media (min-width: 768px) {
  @mixin font-x-list-md {
    $count: 0rem;

    @for $i from 0 through 20 {
      .font-size-md-#{$i + 1}-x {
        font-size: ($baseFontSize + $count) !important;
      }

      $count: $count + 0.25;
    }
  }

  @include font-x-list-md;
}

@media (min-width: 992px) {
  @mixin font-x-list-lg {
    $count: 0rem;

    @for $i from 0 through 20 {
      .font-size-lg-#{$i + 1}-x {
        font-size: ($baseFontSize + $count) !important;
      }

      $count: $count + 0.25;
    }
  }

  @include font-x-list-lg;
}

@media (min-width: 1200px) {
  @mixin font-x-list-xlg {
    $count: 0rem;

    @for $i from 0 through 20 {
      .font-size-xlg-#{$i + 1}-x {
        font-size: ($baseFontSize + $count) !important;
      }

      $count: $count + 0.25;
    }
  }

  @include font-x-list-xlg;
}