<i>, который предназначен вообще не для этого. Буквально в макете такая сетка
как-то вы хитро подточили все под конкретное значение, я изменил переменную --fix и все сломалось.
Это как-то делается по-нормальному?

<svg class="img-fluid mb-3" alt="Фабрика картонных коробок РОНБЕЛ" width="100" height="77"><use xlink:href="https://ronbel.ru/wp-content/themes/5/logo.svg#perforation"></use></svg>.img-fluid {
max-width: 100%;
height: auto;
width: 100px;
height: 77px;
}
Пока делаете, возможно, разберетесь в чем дело.
Также можно почитать про z-index и контекст наложения, дело, скорее всего, в них.