Explain nested class

HTML-CSS
1

Im trying to figure out why i would nest the .desc inside the # features. I assume it is because i only want that .desc to run when it is seen inside the #feature. Also, am i to assume that it doesn’t automatically execute the .desc line of code when it sees the feature id#? Currently i only have one .desc in my css code, is there a need to still nest it? Can i have two different .desc nested in different id blocks? Is that the reason for the nesting?

css

#features {
  margin-top: 30px;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    color: darkorange;

    @media (max-width: 550px) {
      display: none;
    }
  }

  .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125px;
    width: 80vw;
    padding: 5px;

    @media (max-width: 550px) {
      width: 100%;
      text-align: center;
      padding: 0;
      height: 150px;
    }
  }
  
  @media (max-width: 650px) {
    margin-top: 0;
  }

html

  <section id="features">
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="desc">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="desc">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
      </div>
      <div class="desc">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
2

You mean SCSS? You can’t nest things in CSS. In CSS it would be

#features .desc {
  ...
}

ie you want to select and apply rules to HTML elements with the class desc when they are a child of an HTML element with the id features.