My elements from index.html are not distanced properly

Question

I am a complete beginner, I learned HTML and CSS for a month or two. I follow a course and I must compile this sass code and this must show exactly as figma. Sadly, I don't know how to make those elements or containers, to be closer to each other. I tried deleting the gap property but nothing happened.

These elements are not gaping properly:

@import "../utils/vars";
.features {
  display: flex;
  gap: 2px;
}
.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
  &__image {
    width: 270px;
    height: 120px;
    background: #f5f4fa;
    border-radius: 4px;
  }
  &__title {
    display: flex;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: $black-color;
  }
  &__description {
    display: flex;
    max-width: 50%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: $gray-color;
  }
  &__svg {
    transform: translate(97px, 24px);
  }
}

/* compiled SASS */

.features {
  display: flex;
  gap: 2px;
}

.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
}

.features-list__image {
  width: 270px;
  height: 120px;
  background: #f5f4fa;
  border-radius: 4px;
}

.features-list__title {
  display: flex;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: black;
}

.features-list__description {
  display: flex;
  max-width: 50%;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: gray;
}

.features-list__svg {
  transform: translate(97px, 24px);
}

<section class="section features">
  <ul class="list-content features-list">
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-antenna-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">ATTENTION TO DETAILS</h2>
      <p class="features-list__description">
        We go into all the details and processes of your business to develop a customized solution.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-clock-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PUNCTUALITY</h2>
      <p class="features-list__description">
        With us, you can feel safe and secure. An important principle of the company: respect your time and deadlines.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-diagram-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PLANNING</h2>
      <p class="features-list__description">
        You will be able to observe and participate in every phase of solution development and implementation.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-astronaut-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">MODERN TECHNOLOGIES</h2>
      <p class="features-list__description">
        We use innovative tools to solve assigned tasks. It's time to simplify work processes.
      </p>
    </li>
  </ul>
</section>