Resizing does not work as expected
**Describe the bug**
None of the resizing classes work. ```ri-xl```, ```ri-lg``` etc all produce same result.

**Screenshots**
This is my HTML code:
```
<div class="col-xl-2 col-md-4">
    <div class="icon-box">
        <i class="ri-flutter-fill ri-xl"></i>
        <h3><a href="#">Flutter</a></h3>
    </div>
</div>
```
And this is my CSS for ```icon-box```:
```
#hero .icon-box {
  padding: 30px 20px;
  transition: ease-in-out 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
  text-align: center;
}

#hero .icon-box i {
  font-size: 32px;
  line-height: 1;
  color: #ffc451;
}
```

