BEM-alter

     <div class="rect">

      <h2 class="rect__title"> card title </h2>

      <div class="rect__content">

        <p>This is the default content.</p>

      </div>

      <div class="rect__content --large">

        <p>This is the large content.</p>

      </div>

    </div>

    <div class="rect --featured">

      <h2 class="rect__title"> featured card title </h2>

      <div class="rect__content">

        <p>This is the default content for the featured card.</p>

      </div>

      <div class="rect__content --large">

        <p>This is the large content for the featured card.</p>

      </div>

    </div>

  .rect {

    // Block styles

    background-color: $bg-color;

    border: 1px solid $border-color;

    border-radius: 8px;

    padding: 16px;

    margin: 16px;

    transition: all 0.3s ease;

    &__title {

      // Element styles 

      color: $text-color;

      font-size: 1.5rem;

      font-weight: bold;

      margin-bottom: 12px;

    }

    &__content {

      // Element styles

      color: $text-color;

      font-size: 1rem;

      line-height: 1.5;

      &.--large {

        // Element Modifier styles

        font-size: 1.2rem;

        padding: 20px;

      }

    }

    &.--featured {

      // Block Modifier styles

      border-color: $primary-color;

      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

      transform: scale(1.02);

      &:hover {

        transform: scale(1.03);

        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

      }

    }

  }