Почему bootstrap оказывает влияние на grid-row-gap?

 <style>
.gallery--images {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
/*this line*/    grid-gap: 0.2em;                                        
    margin-bottom: 10px;
    background: rgba(250, 250, 250, 0.575);
    background-clip: padding-box;
    backdrop-filter: blur(10px );
    border: 2px solid rgb(240, 240, 240);
    border-radius: 5px;
  }
</style>


 <div class="gallery--images">
        <figure class="gallery__item gallery__item--1">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 1" class="gallery__img">
        </figure>
        <figure class="gallery__item gallery__item--2">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 2" class="gallery__img">
        </figure>
        <figure class="gallery__item gallery__item--3">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 3" class="gallery__img">
        </figure>
        <figure class="gallery__item gallery__item--4">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 4" class="gallery__img">
        </figure>
        <figure class="gallery__item gallery__item--5">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 5" class="gallery__img">
        </figure>
        <figure class="gallery__item gallery__item--6">
            <img src="img/NewYorkCity-1.jpg" alt="Gallery image 6" class="gallery__img">
        </figure>
    </div>